From 943c9745a5fe84343094a1ca2498d43752f24148 Mon Sep 17 00:00:00 2001
From: iatopilskii <iatopilskii@gmail.com>
Date: Thu, 28 Nov 2024 18:52:18 +0100
Subject: [PATCH 01/10] feat: add create repo page

---
 apps/gitness/src/App.tsx                      |  13 +-
 .../src/pages-v2/repo/repo-create-page.tsx    |  73 ++++
 .../src/pages/repo/repo-create-page.tsx       |   2 +-
 packages/ui/src/components/checkbox.tsx       |  35 ++
 packages/ui/src/components/index.ts           |   6 +
 packages/ui/src/components/select.tsx         |   4 +-
 packages/ui/src/components/spacer.tsx         |   1 +
 packages/ui/src/components/textarea.tsx       |   8 +-
 packages/ui/src/components/toast/index.ts     |   2 +
 packages/ui/src/components/toast/toast.tsx    | 115 +++++++
 packages/ui/src/components/toast/toaster.tsx  |  24 ++
 packages/ui/src/components/toast/use-toast.ts | 158 +++++++++
 .../ui/src/views/layouts/SandboxLayout.tsx    |   5 +-
 packages/ui/src/views/repo/index.ts           |   3 +
 .../ui/src/views/repo/repo-create/index.tsx   | 313 ++++++++++++++++++
 .../views/repo/repo-list/repo-list-page.tsx   |   4 +-
 16 files changed, 754 insertions(+), 12 deletions(-)
 create mode 100644 apps/gitness/src/pages-v2/repo/repo-create-page.tsx
 create mode 100644 packages/ui/src/components/checkbox.tsx
 create mode 100644 packages/ui/src/components/toast/index.ts
 create mode 100644 packages/ui/src/components/toast/toast.tsx
 create mode 100644 packages/ui/src/components/toast/toaster.tsx
 create mode 100644 packages/ui/src/components/toast/use-toast.ts
 create mode 100644 packages/ui/src/views/repo/repo-create/index.tsx

diff --git a/apps/gitness/src/App.tsx b/apps/gitness/src/App.tsx
index ffa05844b2..d4ba512b35 100644
--- a/apps/gitness/src/App.tsx
+++ b/apps/gitness/src/App.tsx
@@ -37,6 +37,7 @@ import PullRequestLayout from './layouts/PullRequestLayout'
 import RepoLayoutV1 from './layouts/RepoLayout'
 import SandboxPullRequestListPage from './pages-v2/pull-request/pull-request-list'
 import { RepoCode } from './pages-v2/repo/repo-code'
+import { CreateRepo } from './pages-v2/repo/repo-create-page'
 import RepoLayout from './pages-v2/repo/repo-layout'
 import ReposListPage from './pages-v2/repo/repo-list'
 import { RepoSidebar } from './pages-v2/repo/repo-sidebar'
@@ -68,7 +69,7 @@ import PullRequestListPage from './pages/pull-request/pull-request-list-page'
 import { RepoBranchesListPage } from './pages/repo/repo-branch-list'
 import { RepoBranchSettingsRulesPageContainer } from './pages/repo/repo-branch-rules-container'
 import RepoCommitsPage from './pages/repo/repo-commits'
-import { CreateRepo } from './pages/repo/repo-create-page'
+import { CreateRepoV1 } from './pages/repo/repo-create-page'
 import { RepoFiles } from './pages/repo/repo-files'
 import { RepoHeader } from './pages/repo/repo-header'
 import { RepoImportContainer } from './pages/repo/repo-import-container'
@@ -200,6 +201,14 @@ export default function App() {
             }
           ]
         },
+        {
+          path: ':spaceId/repos/create',
+          element: <CreateRepo />
+        },
+        {
+          path: ':spaceId/repos/import',
+          element: <RepoImportContainer />
+        },
         {
           path: 'theme',
           element: <ProfileSettingsThemePage />
@@ -464,7 +473,7 @@ export default function App() {
             },
             {
               path: ':spaceId/repos/create',
-              element: <CreateRepo />
+              element: <CreateRepoV1 />
             },
             {
               path: ':spaceId/repos/import',
diff --git a/apps/gitness/src/pages-v2/repo/repo-create-page.tsx b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
new file mode 100644
index 0000000000..ae292083d2
--- /dev/null
+++ b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
@@ -0,0 +1,73 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import {
+  CreateRepositoryErrorResponse,
+  OpenapiCreateRepositoryRequest,
+  useCreateRepositoryMutation,
+  useListGitignoreQuery,
+  useListLicensesQuery
+} from '@harnessio/code-service-client'
+import { RepoCreatePage as RepoCreatePageView } from '@harnessio/ui/views'
+import { FormFields } from '@harnessio/views'
+
+import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
+
+export const CreateRepo = () => {
+  const createRepositoryMutation = useCreateRepositoryMutation({})
+  const spaceId = useGetSpaceURLParam()
+  const navigate = useNavigate()
+  const [apiError, setApiError] = useState<string | null>(null)
+
+  const onSubmit = (data: FormFields) => {
+    const repositoryRequest: OpenapiCreateRepositoryRequest = {
+      default_branch: 'main',
+      parent_ref: spaceId,
+      description: data.description,
+      git_ignore: data.gitignore,
+      license: data.license,
+      is_public: data.access === '1',
+      readme: true,
+      identifier: data.name
+    }
+
+    createRepositoryMutation.mutate(
+      {
+        queryParams: {},
+        body: repositoryRequest
+      },
+      {
+        onSuccess: ({ body: data }) => {
+          setApiError(null)
+          navigate(`/spaces/${spaceId}/repos/${data?.identifier}`)
+        },
+        onError: (error: CreateRepositoryErrorResponse) => {
+          const message = error.message || 'An unknown error occurred.'
+          setApiError(message)
+        }
+      }
+    )
+  }
+
+  const { data: { body: gitIgnoreOptions } = {} } = useListGitignoreQuery({})
+
+  const { data: { body: licenseOptions } = {} } = useListLicensesQuery({})
+
+  const onCancel = () => {
+    navigate(`/spaces/${spaceId}/repos`)
+  }
+
+  return (
+    <>
+      <RepoCreatePageView
+        onFormSubmit={onSubmit}
+        onFormCancel={onCancel}
+        apiError={apiError}
+        isLoading={createRepositoryMutation.isLoading}
+        isSuccess={createRepositoryMutation.isSuccess}
+        gitIgnoreOptions={gitIgnoreOptions}
+        licenseOptions={licenseOptions}
+      />
+    </>
+  )
+}
diff --git a/apps/gitness/src/pages/repo/repo-create-page.tsx b/apps/gitness/src/pages/repo/repo-create-page.tsx
index 9f6e71a196..55e29160b9 100644
--- a/apps/gitness/src/pages/repo/repo-create-page.tsx
+++ b/apps/gitness/src/pages/repo/repo-create-page.tsx
@@ -12,7 +12,7 @@ import { FormFields, RepoCreatePageForm } from '@harnessio/views'
 
 import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
 
-export const CreateRepo = () => {
+export const CreateRepoV1 = () => {
   const createRepositoryMutation = useCreateRepositoryMutation({})
   const spaceId = useGetSpaceURLParam()
   const navigate = useNavigate()
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
new file mode 100644
index 0000000000..8007ef4a93
--- /dev/null
+++ b/packages/ui/src/components/checkbox.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from '@radix-ui/react-icons'
+import { cn } from '@utils/cn'
+
+import { Label } from './label'
+
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  label?: string
+}
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, label, ...props }, ref) => (
+    <div className={cn('flex gap-x-2.5', className)}>
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className="border-icons-1 focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:border-icons-2 data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+          <CheckIcon className="size-4" />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      {label && (
+        <Label className="text-foreground-1 font-normal leading-tight tracking-tight" htmlFor={props.id}>
+          {label}
+        </Label>
+      )}
+    </div>
+  )
+)
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 77e1f4af85..46168d225e 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -25,6 +25,11 @@ export * from './no-data'
 export * from './tabs'
 export * from './command'
 export * from './search-files'
+export * from './input'
+export * from './radio-group'
+export * from './textarea'
+export * from './checkbox'
+export * as FormFieldSet from './form-field-set'
 export * from './skeleton'
 export * from './table'
 export * from './commit-copy-actions'
@@ -46,6 +51,7 @@ export * as SearchBox from './search-box'
 export * as NavbarProjectChooser from './navbar-project-chooser'
 export * as StackedList from './stacked-list'
 export * as ButtonGroup from './button-group'
+export * as Toast from './toast'
 export * as FileExplorer from './file-explorer'
 
 export type * from './navbar/types'
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index cdb9f42969..930b0bf5ba 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 
-import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn } from '@utils/cn'
 
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className={cn('h-4 w-4 opacity-50', iconClassName)} />
+      <ChevronDownIcon className={cn('h-4 w-4', iconClassName)} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
diff --git a/packages/ui/src/components/spacer.tsx b/packages/ui/src/components/spacer.tsx
index 088732bc9d..36ac9c9d3f 100644
--- a/packages/ui/src/components/spacer.tsx
+++ b/packages/ui/src/components/spacer.tsx
@@ -9,6 +9,7 @@ const spacerVariants = cva('mt-4 block', {
       1: 'mt-1',
       1.5: 'mt-1.5',
       2: 'mt-2',
+      2.5: 'mt-2.5',
       3: 'mt-3',
       4: 'mt-4',
       5: 'mt-5',
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 3d1f5f9ee4..9953bf7dd6 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -1,14 +1,14 @@
-import { forwardRef, TextareaHTMLAttributes } from 'react'
+import * as React from 'react'
 
 import { cn } from '@utils/cn'
 
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
   return (
     <textarea
       className={cn(
-        'border-borders-2 placeholder:text-foreground-4 flex min-h-[60px] w-full rounded border bg-transparent px-3 py-2 text-14 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-border-2 placeholder:text-foreground-5 focus-visible:ring-ring flex min-h-[74px] w-full rounded border bg-transparent px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       ref={ref}
diff --git a/packages/ui/src/components/toast/index.ts b/packages/ui/src/components/toast/index.ts
new file mode 100644
index 0000000000..23759cca6e
--- /dev/null
+++ b/packages/ui/src/components/toast/index.ts
@@ -0,0 +1,2 @@
+export { toast } from './use-toast'
+export * from './toaster'
diff --git a/packages/ui/src/components/toast/toast.tsx b/packages/ui/src/components/toast/toast.tsx
new file mode 100644
index 0000000000..79c90b556c
--- /dev/null
+++ b/packages/ui/src/components/toast/toast.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react'
+
+import { Cross2Icon } from '@radix-ui/react-icons'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cn } from '@utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[317px]',
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  'pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded py-3 pl-3.5 pr-12 shadow-lg transition-all',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground border',
+        destructive: 'bg-foreground-danger text-foreground-1'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'text-icons-2 absolute right-3.5 top-[15px] my-auto size-3 rounded-md focus:outline-none focus:ring-1',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="size-3" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm leading-tight tracking-tight [&+div]:text-xs', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction
+}
diff --git a/packages/ui/src/components/toast/toaster.tsx b/packages/ui/src/components/toast/toaster.tsx
new file mode 100644
index 0000000000..c295e5f591
--- /dev/null
+++ b/packages/ui/src/components/toast/toaster.tsx
@@ -0,0 +1,24 @@
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './toast'
+import { useToast } from './use-toast'
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/packages/ui/src/components/toast/use-toast.ts b/packages/ui/src/components/toast/use-toast.ts
new file mode 100644
index 0000000000..faa875298c
--- /dev/null
+++ b/packages/ui/src/components/toast/use-toast.ts
@@ -0,0 +1,158 @@
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from './toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+export const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST'
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type Action =
+  | { type: 'ADD_TOAST'; toast: ToasterToast }
+  | { type: 'UPDATE_TOAST'; toast: Partial<ToasterToast> }
+  | { type: 'DISMISS_TOAST'; toastId?: ToasterToast['id'] }
+  | { type: 'REMOVE_TOAST'; toastId?: ToasterToast['id'] }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map(t => (t.id === action.toast.id ? { ...t, ...action.toast } : t))
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach(toast => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map(t => (t.id === toastId || toastId === undefined ? { ...t, open: false } : t))
+      }
+    }
+
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return { ...state, toasts: [] }
+      }
+      return { ...state, toasts: state.toasts.filter(t => t.id !== action.toastId) }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach(listener => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id }
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: open => {
+        if (!open) dismiss()
+      }
+    }
+  })
+
+  return {
+    id,
+    dismiss,
+    update
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId })
+  }
+}
+
+export { useToast, toast }
diff --git a/packages/ui/src/views/layouts/SandboxLayout.tsx b/packages/ui/src/views/layouts/SandboxLayout.tsx
index 9c0ed9a012..0c1ecbfb24 100644
--- a/packages/ui/src/views/layouts/SandboxLayout.tsx
+++ b/packages/ui/src/views/layouts/SandboxLayout.tsx
@@ -127,12 +127,13 @@ interface ContentProps {
   children: ReactNode
   maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
   className?: string
+  paddingClassName?: string
 }
 
-function Content({ children, maxWidth, className }: ContentProps) {
+function Content({ children, maxWidth, className, paddingClassName = 'px-8 py-5 pb-24' }: ContentProps) {
   const widthClass = maxWidth ? `max-w-${maxWidth} mx-auto` : ''
 
-  return <div className={cn('px-6 py-4 pb-20', widthClass, className)}>{children}</div>
+  return <div className={cn(paddingClassName, widthClass, className)}>{children}</div>
 }
 
 function Columns({ children, className, columnWidths = 'repeat(2, 1fr)' }: ColumnsProps) {
diff --git a/packages/ui/src/views/repo/index.ts b/packages/ui/src/views/repo/index.ts
index 19e47e186d..733c3ba620 100644
--- a/packages/ui/src/views/repo/index.ts
+++ b/packages/ui/src/views/repo/index.ts
@@ -8,6 +8,9 @@ export * from '@views/repo/repo-layout'
 // repo sidebar
 export * from '@views/repo/repo-sidebar'
 
+// repo create
+export * from '@views/repo/repo-create'
+
 // repo summary
 export * from '@views/repo/repo-summary/repo-summary'
 
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
new file mode 100644
index 0000000000..49190deec9
--- /dev/null
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -0,0 +1,313 @@
+import { useEffect } from 'react'
+import { useForm, type SubmitHandler } from 'react-hook-form'
+import { Link } from 'react-router-dom'
+
+import {
+  Alert,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  FormFieldSet,
+  Input,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Spacer,
+  Text,
+  Textarea,
+  Toast
+} from '@/components'
+import { SandboxLayout } from '@/views'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+// Define the form schema with optional fields for gitignore and license
+const formSchema = z.object({
+  name: z.string().min(1, { message: 'Please provide a name' }),
+  description: z.string(),
+  gitignore: z.string().optional(),
+  license: z.string().optional(),
+  access: z.enum(['1', '2'], { errorMap: () => ({ message: 'Please select who has access' }) }),
+  readme: z.boolean()
+})
+
+export type FormFields = z.infer<typeof formSchema> // Automatically generate a type from the schema
+
+interface RepoCreatePageProps {
+  onFormSubmit: (data: FormFields) => void
+  onFormCancel: () => void
+  apiError: string | null
+  isLoading: boolean
+  isSuccess: boolean
+  gitIgnoreOptions?: string[]
+  licenseOptions?: { value?: string; label?: string }[]
+}
+
+export function RepoCreatePage({
+  onFormSubmit,
+  apiError = null,
+  onFormCancel,
+  isLoading,
+  isSuccess,
+  gitIgnoreOptions,
+  licenseOptions
+}: RepoCreatePageProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    formState: { errors, isValid }
+  } = useForm<FormFields>({
+    resolver: zodResolver(formSchema),
+    mode: 'onChange',
+    defaultValues: {
+      name: '',
+      description: '',
+      gitignore: '',
+      license: '',
+      access: '2',
+      readme: false
+    }
+  })
+
+  const accessValue = watch('access')
+  const gitignoreValue = watch('gitignore')
+  const licenseValue = watch('license')
+  const readmeValue = watch('readme')
+
+  const handleSelectChange = (fieldName: keyof FormFields, value: string) => {
+    setValue(fieldName, value, { shouldValidate: true })
+  }
+
+  const handleAccessChange = (value: '1' | '2') => {
+    setValue('access', value, { shouldValidate: true })
+  }
+
+  const handleReadmeChange = (value: boolean) => {
+    console.log('readmeValue', value)
+    setValue('readme', value, { shouldValidate: true })
+  }
+
+  useEffect(() => {
+    if (isSuccess === true) {
+      reset()
+    }
+  }, [isSuccess, reset])
+
+  useEffect(() => {
+    if (apiError) {
+      Toast.toast({
+        title: apiError,
+        variant: 'destructive'
+      })
+    }
+  }, [])
+
+  const onSubmit: SubmitHandler<FormFields> = data => {
+    onFormSubmit(data)
+  }
+
+  const handleCancel = () => {
+    onFormCancel()
+  }
+
+  return (
+    <>
+      <SandboxLayout.Main hasLeftPanel>
+        <SandboxLayout.Content paddingClassName="w-[570px] mx-auto py-11">
+          <Spacer size={5} />
+          <Text className="tracking-tight" size={5} weight="medium">
+            Create a new repository
+          </Text>
+          <Spacer size={2.5} />
+          <Text className="text-foreground-2 max-w-[476px] tracking-tight" size={2} as="p">
+            A repository contains all project files, including the revision history. Already have a project repository
+            elsewhere?{' '}
+            <Link className="text-foreground-accent" to="../import" relative="path">
+              Import a repository.
+            </Link>
+          </Text>
+          <Spacer size={10} />
+          <form onSubmit={handleSubmit(onSubmit)}>
+            {/* NAME */}
+            <FormFieldSet.Root>
+              <FormFieldSet.ControlGroup>
+                <FormFieldSet.Label htmlFor="name">Name</FormFieldSet.Label>
+                <Input
+                  id="name"
+                  {...register('name')}
+                  theme={errors.name ? 'danger' : 'default'}
+                  placeholder="Enter repository name"
+                  size="md"
+                  autoFocus
+                />
+                {errors.name && (
+                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                    {errors.name.message?.toString()}
+                  </FormFieldSet.Message>
+                )}
+              </FormFieldSet.ControlGroup>
+              <Spacer size={7} />
+              {/* DESCRIPTION */}
+              <FormFieldSet.ControlGroup>
+                <FormFieldSet.Label htmlFor="description" optional>
+                  Description
+                </FormFieldSet.Label>
+                <Textarea
+                  id="description"
+                  {...register('description')}
+                  placeholder="Enter a description of this repository..."
+                />
+                {errors.description && (
+                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                    {errors.description.message?.toString()}
+                  </FormFieldSet.Message>
+                )}
+              </FormFieldSet.ControlGroup>
+            </FormFieldSet.Root>
+            <Spacer size={7} />
+
+            {/* GITIGNORE */}
+            <FormFieldSet.Root>
+              <FormFieldSet.ControlGroup>
+                <FormFieldSet.Label htmlFor="gitignore">Add a .gitignore</FormFieldSet.Label>
+                <Select value={gitignoreValue} onValueChange={value => handleSelectChange('gitignore', value)}>
+                  <SelectTrigger id="gitignore">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {gitIgnoreOptions &&
+                      gitIgnoreOptions?.map(option => {
+                        return (
+                          <SelectItem key={option} value={option}>
+                            {option}
+                          </SelectItem>
+                        )
+                      })}
+                  </SelectContent>
+                </Select>
+                <FormFieldSet.Caption>Choose which files not to track from a list of templates.</FormFieldSet.Caption>
+                {errors.gitignore && (
+                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                    {errors.gitignore.message?.toString()}
+                  </FormFieldSet.Message>
+                )}
+              </FormFieldSet.ControlGroup>
+              <Spacer size={7} />
+
+              {/* LICENSE */}
+              <FormFieldSet.ControlGroup>
+                <FormFieldSet.Label htmlFor="license">Choose a license</FormFieldSet.Label>
+                <Select value={licenseValue} onValueChange={value => handleSelectChange('license', value)}>
+                  <SelectTrigger id="license">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {licenseOptions &&
+                      licenseOptions?.map(option => (
+                        <SelectItem key={option.value} value={option.value ?? ''}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+                <FormFieldSet.Caption>
+                  A license tells others what they can and can&apos;t do with your code.
+                </FormFieldSet.Caption>
+                {errors.license && (
+                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                    {errors.license.message?.toString()}
+                  </FormFieldSet.Message>
+                )}
+              </FormFieldSet.ControlGroup>
+            </FormFieldSet.Root>
+            <Spacer size={11} />
+
+            {/* ACCESS */}
+            <FormFieldSet.Root>
+              <FormFieldSet.ControlGroup>
+                <FormFieldSet.Label htmlFor="access">Who has access</FormFieldSet.Label>
+                <RadioGroup className="mt-3.5" value={accessValue} onValueChange={handleAccessChange} id="access">
+                  <FormFieldSet.Option
+                    control={<RadioGroupItem value="1" id="access-public" />}
+                    id="access-public"
+                    label="Public"
+                    description="Anyone with access to the Gitness environment can clone this repo."
+                  />
+                  <FormFieldSet.Option
+                    control={<RadioGroupItem value="2" id="access-private" />}
+                    id="access-private"
+                    label="Private"
+                    description="You choose who can see and commit to this repository."
+                  />
+                </RadioGroup>
+                {errors.access && (
+                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                    {errors.access.message?.toString()}
+                  </FormFieldSet.Message>
+                )}
+              </FormFieldSet.ControlGroup>
+            </FormFieldSet.Root>
+            <Spacer size={12} />
+
+            {/* README */}
+            <FormFieldSet.Root>
+              <FormFieldSet.ControlGroup>
+                <FormFieldSet.Label>Initialize this repository with</FormFieldSet.Label>
+                <Checkbox
+                  className="mt-3.5"
+                  id="readme"
+                  checked={readmeValue}
+                  onCheckedChange={handleReadmeChange}
+                  label="Add a README file"
+                />
+                <Text className="text-foreground-4 mt-1.5 pl-[26px] font-normal tracking-tight" as="p" size={2}>
+                  This is where you can write a long description for your project.{' '}
+                  <Link className="text-foreground-accent block" to="/">
+                    Learn more about README
+                  </Link>
+                </Text>
+
+                {errors.readme && (
+                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                    {errors.readme.message?.toString()}
+                  </FormFieldSet.Message>
+                )}
+              </FormFieldSet.ControlGroup>
+            </FormFieldSet.Root>
+
+            {apiError && (
+              <Alert.Container variant="destructive" className="mb-8">
+                <Alert.Description>{apiError?.toString()}</Alert.Description>
+              </Alert.Container>
+            )}
+
+            {/* SUBMIT BUTTONS */}
+            <FormFieldSet.Root className="mt-[50px]">
+              <FormFieldSet.ControlGroup>
+                <ButtonGroup.Root>
+                  <>
+                    <Button type="submit" disabled={!isValid || isLoading}>
+                      {!isLoading ? 'Create repository' : 'Creating repository...'}
+                    </Button>
+                    <Button type="button" variant="outline" onClick={handleCancel}>
+                      Cancel
+                    </Button>
+                  </>
+                </ButtonGroup.Root>
+              </FormFieldSet.ControlGroup>
+            </FormFieldSet.Root>
+          </form>
+
+          <Toast.Toaster />
+        </SandboxLayout.Content>
+      </SandboxLayout.Main>
+    </>
+  )
+}
diff --git a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
index e39d426474..d6120ae3d5 100644
--- a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
+++ b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
@@ -410,7 +410,9 @@ const SandboxRepoListPage: FC<RepoListProps> = ({
                 filterHandlers={filterHandlers}
                 t={t}
               />
-              <Button variant="default">{t('views:repos.create-repository')}</Button>
+              <Button variant="default" asChild>
+                <Link to={`create`}>{t('views:repos.create-repository')}</Link>
+              </Button>
             </ListActions.Right>
           </ListActions.Root>
           {(filterHandlers.activeFilters.length > 0 || filterHandlers.activeSorts.length > 0) && <Spacer size={2} />}

From 56f3be0fd3afd914ac36a171986eedf0ed594e8f Mon Sep 17 00:00:00 2001
From: iatopilskii <iatopilskii@gmail.com>
Date: Mon, 2 Dec 2024 20:29:02 +0100
Subject: [PATCH 02/10] Fix: fixes and refactoring after review

---
 .../src/pages-v2/repo/repo-create-page.tsx    |  18 +-
 packages/ui/src/components/button-group.tsx   |   2 +-
 packages/ui/src/components/button.tsx         |   8 +-
 packages/ui/src/components/checkbox.tsx       |   6 +-
 packages/ui/src/components/fieldset.tsx       |  23 ++
 packages/ui/src/components/form-field-set.tsx | 188 ---------------
 packages/ui/src/components/index.ts           |   7 +-
 packages/ui/src/components/radio-group.tsx    |  56 ++++-
 packages/ui/src/components/select.tsx         | 108 +++++----
 packages/ui/src/components/styled-link.tsx    |  17 ++
 packages/ui/src/components/textarea.tsx       |  63 ++++-
 packages/ui/src/components/toast/toast.tsx    |   8 +-
 packages/ui/src/components/toast/use-toast.ts |   4 +-
 packages/ui/src/styles.css                    |  35 +++
 .../ui/src/views/repo/repo-create/index.tsx   | 224 +++++++++---------
 .../views/src/components/form-field-set.tsx   |   7 +
 16 files changed, 375 insertions(+), 399 deletions(-)
 create mode 100644 packages/ui/src/components/fieldset.tsx
 delete mode 100644 packages/ui/src/components/form-field-set.tsx
 create mode 100644 packages/ui/src/components/styled-link.tsx

diff --git a/apps/gitness/src/pages-v2/repo/repo-create-page.tsx b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
index ae292083d2..73601f6c7b 100644
--- a/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
+++ b/apps/gitness/src/pages-v2/repo/repo-create-page.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import {
@@ -8,8 +7,8 @@ import {
   useListGitignoreQuery,
   useListLicensesQuery
 } from '@harnessio/code-service-client'
-import { RepoCreatePage as RepoCreatePageView } from '@harnessio/ui/views'
-import { FormFields } from '@harnessio/views'
+import { toast, Toaster } from '@harnessio/ui/components'
+import { FormFields, RepoCreatePage as RepoCreatePageView } from '@harnessio/ui/views'
 
 import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
 
@@ -17,7 +16,6 @@ export const CreateRepo = () => {
   const createRepositoryMutation = useCreateRepositoryMutation({})
   const spaceId = useGetSpaceURLParam()
   const navigate = useNavigate()
-  const [apiError, setApiError] = useState<string | null>(null)
 
   const onSubmit = (data: FormFields) => {
     const repositoryRequest: OpenapiCreateRepositoryRequest = {
@@ -38,12 +36,14 @@ export const CreateRepo = () => {
       },
       {
         onSuccess: ({ body: data }) => {
-          setApiError(null)
-          navigate(`/spaces/${spaceId}/repos/${data?.identifier}`)
+          navigate(`/${spaceId}/repos/${data?.identifier}`)
         },
         onError: (error: CreateRepositoryErrorResponse) => {
           const message = error.message || 'An unknown error occurred.'
-          setApiError(message)
+          toast({
+            title: message,
+            variant: 'destructive'
+          })
         }
       }
     )
@@ -54,7 +54,7 @@ export const CreateRepo = () => {
   const { data: { body: licenseOptions } = {} } = useListLicensesQuery({})
 
   const onCancel = () => {
-    navigate(`/spaces/${spaceId}/repos`)
+    navigate(`/${spaceId}/repos`)
   }
 
   return (
@@ -62,12 +62,12 @@ export const CreateRepo = () => {
       <RepoCreatePageView
         onFormSubmit={onSubmit}
         onFormCancel={onCancel}
-        apiError={apiError}
         isLoading={createRepositoryMutation.isLoading}
         isSuccess={createRepositoryMutation.isSuccess}
         gitIgnoreOptions={gitIgnoreOptions}
         licenseOptions={licenseOptions}
       />
+      <Toaster />
     </>
   )
 }
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
index 25441832b3..e8410296cc 100644
--- a/packages/ui/src/components/button-group.tsx
+++ b/packages/ui/src/components/button-group.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { cn } from '@utils/cn'
 
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index 3622530848..bdf1872b69 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -6,13 +6,15 @@ import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+        default:
+          'bg-background-5 text-foreground-6 hover:bg-background-10 disabled:bg-background-6 disabled:text-foreground-9',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
-        outline: 'border-borders-2 bg-transparent hover:bg-accent hover:text-accent-foreground border shadow-sm',
+        outline:
+          'border-borders-2 hover:border-borders-6 text-foreground-2 hover:text-foreground-8 border bg-transparent',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
         tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index 8007ef4a93..00f6caf62c 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
 import { cn } from '@utils/cn'
 
+import { Icon } from './icon'
 import { Label } from './label'
 
 interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
@@ -15,11 +15,11 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="border-icons-1 focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:border-icons-2 data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
+        className="border-icons-1 data-[state=checked]:bg-primary data-[state=checked]:border-icons-2 data-[state=checked]:text-primary-foreground hover:border-icons-3 disabled:border-icons-4 peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-          <CheckIcon className="size-4" />
+          <Icon className="h-1.5 w-2" name="checkbox" width={8} height={6} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
       {label && (
diff --git a/packages/ui/src/components/fieldset.tsx b/packages/ui/src/components/fieldset.tsx
new file mode 100644
index 0000000000..9430c6cb17
--- /dev/null
+++ b/packages/ui/src/components/fieldset.tsx
@@ -0,0 +1,23 @@
+import { cn } from '@utils/cn'
+
+interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement> {
+  box?: boolean
+  shaded?: boolean
+}
+
+export function Fieldset({ children, box, shaded, className, ...props }: FieldsetProps) {
+  return (
+    <fieldset
+      className={cn(
+        'flex flex-col',
+        { 'rounded-md border px-5 py-3.5 pb-5': box, 'bg-primary/[0.02]': shaded },
+        className
+      )}
+      role="group"
+      aria-describedby="fieldset-description"
+      {...props}
+    >
+      {children}
+    </fieldset>
+  )
+}
diff --git a/packages/ui/src/components/form-field-set.tsx b/packages/ui/src/components/form-field-set.tsx
deleted file mode 100644
index cd467d8a06..0000000000
--- a/packages/ui/src/components/form-field-set.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { cn } from '@utils/cn'
-
-import Checkbox from './filters/filters-bar/filter-variants/checkbox'
-import { RadioGroupItem } from './radio-group'
-import { Text } from './text'
-
-interface CompProps {
-  children: React.ReactNode
-  className?: string
-}
-
-interface RootProps {
-  children: React.ReactNode
-  box?: boolean
-  shaded?: boolean
-  className?: string
-}
-
-enum MessageTheme {
-  SUCCESS = 'success',
-  WARNING = 'warning',
-  ERROR = 'error',
-  DEFAULT = 'default'
-}
-
-interface MessageProps {
-  children: React.ReactNode
-  className?: string
-  theme: MessageTheme
-}
-
-interface ControlProps {
-  children: React.ReactNode
-  type?: 'button'
-  className?: string
-}
-
-type ControlType = React.ReactElement<typeof RadioGroupItem> | React.ReactElement<typeof Checkbox>
-
-interface OptionProps {
-  control: ControlType
-  id: string
-  label?: string
-  description?: string
-  className?: string
-}
-
-interface LabelProps {
-  children: React.ReactNode
-  htmlFor?: string
-  required?: boolean
-  className?: string
-}
-
-interface SeparatorProps {
-  className?: string
-  dashed?: boolean
-  dotted?: boolean
-}
-
-interface SpacerProps {
-  className?: string
-}
-
-const themeClassMap: Record<MessageTheme, string> = {
-  [MessageTheme.SUCCESS]: 'text-success',
-  [MessageTheme.WARNING]: 'text-warning',
-  [MessageTheme.ERROR]: 'text-destructive',
-  [MessageTheme.DEFAULT]: 'text-tertiary-background'
-}
-
-function Root({ children, box, shaded, className }: RootProps) {
-  return (
-    <fieldset
-      className={cn(
-        'mb-8 flex flex-col gap-6',
-        { 'rounded-md border px-5 py-3.5 pb-5': box, 'bg-primary/[0.02]': shaded },
-        className
-      )}
-      role="group"
-      aria-describedby="fieldset-description"
-    >
-      {children}
-    </fieldset>
-  )
-}
-
-function Legend({ children, className }: CompProps) {
-  return (
-    <Text size={3} weight={'medium'} className={cn('mb-0', className)} as="p" role="heading">
-      {children}
-    </Text>
-  )
-}
-
-function SubLegend({ children, className }: CompProps) {
-  return (
-    <Text size={2} weight={'normal'} className={cn('text-primary/70 mb-0', className)} as="p" id="fieldset-description">
-      {children}
-    </Text>
-  )
-}
-
-function Item({ children, className }: CompProps) {
-  return (
-    <div className={cn('item-wrapper', className)} role="presentation">
-      {children}
-    </div>
-  )
-}
-
-function Label({ htmlFor, required, children, className }: LabelProps) {
-  return (
-    <Label htmlFor={htmlFor} className={cn('text-primary/80 font-normal', className)}>
-      {children}
-      {required && <span className="pl-0.5 align-top text-destructive">*</span>}
-    </Label>
-  )
-}
-
-function ControlGroup({ children, type, className }: ControlProps) {
-  return (
-    <div
-      className={cn('flex flex-col gap-2', { 'mt-2': type === 'button' }, className)}
-      role="group"
-      aria-label={type === 'button' ? 'Button control group' : 'Input control group'}
-    >
-      {children}
-    </div>
-  )
-}
-
-function Caption({ children, className }: CompProps) {
-  return (
-    <Text as="p" size={1} color="tertiaryBackground" role="note" aria-live="polite" className={cn('mt-1', className)}>
-      {children}
-    </Text>
-  )
-}
-
-function Message({ children, theme, className }: MessageProps) {
-  const textClass = themeClassMap[theme]
-  const role = theme === MessageTheme.ERROR ? 'alert' : 'status'
-  const ariaLive = theme === MessageTheme.ERROR ? 'assertive' : 'polite'
-
-  return (
-    <div className={cn('', textClass, className)} role={role} aria-live={ariaLive}>
-      <Text as="p" size={1} className="text-inherit">
-        {children}
-      </Text>
-    </div>
-  )
-}
-
-function Option({ control, id, label, description, className }: OptionProps) {
-  return (
-    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-    <div className={cn('mt-2 flex items-start gap-x-4', className)} role="option" aria-labelledby={`${id}-label`}>
-      <div className="mt-0.5">{control}</div>
-      <div className="flex flex-col gap-0">
-        <Label htmlFor={id} className="font-medium">
-          {label}
-        </Label>
-        {description && (
-          <Text as="p" size={1} color="tertiaryBackground" id={`${id}-description`} role="note">
-            {description}
-          </Text>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function Separator({ dashed, dotted, className }: SeparatorProps) {
-  return (
-    <div
-      className={cn('border-b', { 'border-dashed': dashed, 'border-dotted': dotted }, className)}
-      role="separator"
-      aria-orientation="horizontal"
-    />
-  )
-}
-
-function Spacer({ className }: SpacerProps) {
-  return <div className={cn('mt-1', className)} role="presentation" aria-hidden="true" />
-}
-
-export { Root, Legend, SubLegend, Item, Label, ControlGroup, Caption, Message, Option, Separator, Spacer, MessageTheme }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 46168d225e..c61783bf64 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -29,7 +29,11 @@ export * from './input'
 export * from './radio-group'
 export * from './textarea'
 export * from './checkbox'
-export * as FormFieldSet from './form-field-set'
+export * from './toast'
+export * from './styled-link'
+export * from './fieldset'
+export * from './control-group'
+export * from './form-error-message'
 export * from './skeleton'
 export * from './table'
 export * from './commit-copy-actions'
@@ -51,7 +55,6 @@ export * as SearchBox from './search-box'
 export * as NavbarProjectChooser from './navbar-project-chooser'
 export * as StackedList from './stacked-list'
 export * as ButtonGroup from './button-group'
-export * as Toast from './toast'
 export * as FileExplorer from './file-explorer'
 
 export type * from './navbar/types'
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
index 32d4bda0b4..925b24ced3 100644
--- a/packages/ui/src/components/radio-group.tsx
+++ b/packages/ui/src/components/radio-group.tsx
@@ -4,15 +4,59 @@ import { CheckIcon } from '@radix-ui/react-icons'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cn } from '@utils/cn'
 
+import { Checkbox } from './checkbox'
+import { Label } from './label'
+import { Text } from './text'
+
+type ControlType = React.ReactElement<typeof RadioGroupItem> | React.ReactElement<typeof Checkbox>
+interface RadioGroupItemProps {
+  control: ControlType
+  id: string
+  label?: string
+  description?: string | React.ReactNode
+  className?: string
+  ariaSelected?: boolean
+}
+
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />
+  return <RadioGroupPrimitive.Root className={cn('grid gap-5', className)} {...props} ref={ref} />
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-const RadioGroupItem = React.forwardRef<
+const RadioGroupItem = ({ control, id, label, description, ariaSelected, className }: RadioGroupItemProps) => {
+  return (
+    <div
+      className={cn('flex items-start', className)}
+      role="option"
+      aria-labelledby={`${id}-label`}
+      aria-selected={ariaSelected}
+    >
+      {control}
+      <div className="flex flex-col gap-0">
+        <Label htmlFor={id} className="cursor-pointer pl-4 font-medium leading-tight">
+          {label}
+        </Label>
+        {description && (
+          <Text
+            className="ml-4 mt-1.5 leading-snug tracking-tight"
+            as="p"
+            size={2}
+            color="tertiaryBackground"
+            id={`${id}-description`}
+            role="note"
+          >
+            {description}
+          </Text>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const RadioButton = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
 >(({ className, ...props }, ref) => {
@@ -20,17 +64,17 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4',
         className
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="size-3.5 fill-primary" />
+        <CheckIcon className="size-3.5 fill-icons-2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
 })
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+RadioButton.displayName = RadioGroupPrimitive.Item.displayName
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioButton, RadioGroupItem }
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 930b0bf5ba..a8c78d5d5d 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -2,11 +2,60 @@
 
 import * as React from 'react'
 
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn } from '@utils/cn'
 
-const Select = SelectPrimitive.Root
+import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
+import { Label } from './label'
+import { Text } from './text'
+
+interface SelectError {
+  theme: ErrorMessageTheme
+  message?: string
+}
+
+interface SelectProps extends React.PropsWithChildren, SelectPrimitive.SelectProps {
+  label?: string
+  error?: SelectError
+  caption?: React.ReactNode
+  disabled?: boolean
+  placeholder: string
+}
+
+const Select: React.FC<SelectProps> = ({
+  name,
+  label,
+  error,
+  caption,
+  disabled = false,
+  placeholder,
+  children,
+  ...props
+}) => (
+  <SelectPrimitive.Root {...props}>
+    {label && (
+      <Label className="mb-2.5" theme={disabled ? 'disabled' : 'secondary'} htmlFor={name}>
+        {label}
+      </Label>
+    )}
+    <SelectTrigger id={name} disabled={disabled}>
+      <SelectValue placeholder={placeholder} />
+    </SelectTrigger>
+    {children}
+    {error && (
+      <FormErrorMessage className="mt-1" theme={error.theme}>
+        {error.message}
+      </FormErrorMessage>
+    )}
+    {caption && (
+      <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+        {caption}
+      </Text>
+    )}
+  </SelectPrimitive.Root>
+)
+Select.displayName = SelectPrimitive.Root.displayName
 
 const SelectGroup = SelectPrimitive.Group
 
@@ -19,7 +68,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'border-borders-2 ring-offset-background placeholder:text-foreground-2 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed disabled:border-borders-1 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -32,34 +81,6 @@ const SelectTrigger = React.forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronUpIcon />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronDownIcon />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
-
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
@@ -68,7 +89,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] max-w-[var(--radix-popper-anchor-width)] overflow-hidden rounded-md box-border shadow-md',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
@@ -76,17 +97,15 @@ const SelectContent = React.forwardRef<
       position={position}
       {...props}
     >
-      <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          'p-1',
+          'p-1 rounded-md border',
           position === 'popper' &&
             'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
-        {children}
+        {React.Children.count(children) > 0 ? children : <div className="pl-2">Nothing to select</div>}
       </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ))
@@ -107,12 +126,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:outline-none',
       className
     )}
     {...props}
   >
-    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+    <span className="absolute right-2 flex size-3.5 items-center justify-center outline-none">
       <SelectPrimitive.ItemIndicator>
         <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>
@@ -130,15 +149,4 @@ const SelectSeparator = React.forwardRef<
 ))
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton
-}
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }
diff --git a/packages/ui/src/components/styled-link.tsx b/packages/ui/src/components/styled-link.tsx
new file mode 100644
index 0000000000..6a06a8f968
--- /dev/null
+++ b/packages/ui/src/components/styled-link.tsx
@@ -0,0 +1,17 @@
+import { Link, type LinkProps } from 'react-router-dom'
+
+import { cn } from '@utils/cn'
+
+type StyledLinkProps = LinkProps & React.RefAttributes<HTMLAnchorElement>
+
+export function StyledLink({ className, ...props }: StyledLinkProps) {
+  return (
+    <Link
+      className={cn(
+        'text-foreground-accent hover:decoration-foreground-accent underline decoration-transparent underline-offset-4 transition-colors duration-200',
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 9953bf7dd6..9b8f3c1006 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -2,20 +2,57 @@ import * as React from 'react'
 
 import { cn } from '@utils/cn'
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
+import { Label } from './label'
+import { Text } from './text'
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        'border-border-2 placeholder:text-foreground-5 focus-visible:ring-ring flex min-h-[74px] w-full rounded border bg-transparent px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
+interface TextareaError {
+  theme: ErrorMessageTheme
+  message?: string
+}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string
+  caption?: React.ReactNode
+  error?: TextareaError
+  optional?: boolean
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ id, disabled, label, caption, error, optional, className, ...props }, ref) => {
+    return (
+      <>
+        {label && (
+          <Label className="mb-2.5" theme={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
+            {label}
+          </Label>
+        )}
+        <textarea
+          className={cn(
+            'placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-transparent px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed resize-none',
+            className,
+            error
+              ? 'border-borders-danger'
+              : 'border-borders-2 focus-visible:border-borders-3 disabled:placeholder:text-foreground-9 disabled:border-borders-1'
+          )}
+          id={id}
+          disabled={disabled}
+          ref={ref}
+          {...props}
+        />
+        {error && (
+          <FormErrorMessage className="mt-1" theme={error.theme}>
+            {error.message}
+          </FormErrorMessage>
+        )}
+        {caption && (
+          <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+            {caption}
+          </Text>
+        )}
+      </>
+    )
+  }
+)
 Textarea.displayName = 'Textarea'
 
 export { Textarea }
diff --git a/packages/ui/src/components/toast/toast.tsx b/packages/ui/src/components/toast/toast.tsx
index 79c90b556c..c8758ad0cd 100644
--- a/packages/ui/src/components/toast/toast.tsx
+++ b/packages/ui/src/components/toast/toast.tsx
@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[317px]',
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 gap-y-2 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[317px]',
       className
     )}
     {...props}
@@ -23,12 +23,12 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  'pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded py-3 pl-3.5 pr-12 shadow-lg transition-all',
+  'pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded border py-3 pl-3.5 pr-12 shadow-lg transition-all',
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground border',
-        destructive: 'bg-foreground-danger text-foreground-1'
+        default: 'bg-background-3 border-borders-1 text-foreground [&_svg]:text-icons-1',
+        destructive: 'bg-foreground-danger text-foreground-1 [&_svg]:text-icons-2 border-borders-danger'
       }
     },
     defaultVariants: {
diff --git a/packages/ui/src/components/toast/use-toast.ts b/packages/ui/src/components/toast/use-toast.ts
index faa875298c..4cb28e37cf 100644
--- a/packages/ui/src/components/toast/use-toast.ts
+++ b/packages/ui/src/components/toast/use-toast.ts
@@ -2,8 +2,8 @@ import * as React from 'react'
 
 import type { ToastActionElement, ToastProps } from './toast'
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 3
+const TOAST_REMOVE_DELAY = 10000
 
 type ToasterToast = ToastProps & {
   id: string
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 1856222c82..c6b1fcc46e 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -1545,3 +1545,38 @@
   outline-offset: 2px;
   border-radius: 2px;
 }
+
+/* Hack for detecting scroll on select */
+@keyframes detect-scroll {
+  from,
+  to {
+    --can-scroll: ;
+  }
+}
+
+[data-radix-select-viewport] {
+  animation: detect-scroll linear;
+  animation-timeline: scroll(self);
+
+  --padding-if-can-scroll: var(--can-scroll) 4px 0 4px 4px;
+  --padding-if-cant-scroll: 4px;
+  padding: var(--padding-if-can-scroll, var(--padding-if-cant-scroll));
+}
+
+/* Select scrollbar */
+
+[data-radix-select-viewport] {
+  scrollbar-width: auto !important;
+}
+
+[data-radix-select-viewport]::-webkit-scrollbar {
+  width: 14px;
+  display: block !important;
+}
+
+[data-radix-select-viewport]::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--background-09));
+  border: 4px solid transparent;
+  border-radius: 7px;
+  background-clip: content-box;
+}
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
index 49190deec9..eaba96c84b 100644
--- a/packages/ui/src/views/repo/repo-create/index.tsx
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -1,25 +1,25 @@
 import { useEffect } from 'react'
 import { useForm, type SubmitHandler } from 'react-hook-form'
-import { Link } from 'react-router-dom'
 
 import {
-  Alert,
   Button,
   ButtonGroup,
   Checkbox,
-  FormFieldSet,
+  ControlGroup,
+  ErrorMessageTheme,
+  Fieldset,
+  FormErrorMessage,
   Input,
+  RadioButton,
   RadioGroup,
   RadioGroupItem,
   Select,
   SelectContent,
   SelectItem,
-  SelectTrigger,
-  SelectValue,
   Spacer,
+  StyledLink,
   Text,
-  Textarea,
-  Toast
+  Textarea
 } from '@/components'
 import { SandboxLayout } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -40,7 +40,6 @@ export type FormFields = z.infer<typeof formSchema> // Automatically generate a
 interface RepoCreatePageProps {
   onFormSubmit: (data: FormFields) => void
   onFormCancel: () => void
-  apiError: string | null
   isLoading: boolean
   isSuccess: boolean
   gitIgnoreOptions?: string[]
@@ -49,7 +48,6 @@ interface RepoCreatePageProps {
 
 export function RepoCreatePage({
   onFormSubmit,
-  apiError = null,
   onFormCancel,
   isLoading,
   isSuccess,
@@ -90,25 +88,15 @@ export function RepoCreatePage({
   }
 
   const handleReadmeChange = (value: boolean) => {
-    console.log('readmeValue', value)
     setValue('readme', value, { shouldValidate: true })
   }
 
   useEffect(() => {
-    if (isSuccess === true) {
+    if (isSuccess) {
       reset()
     }
   }, [isSuccess, reset])
 
-  useEffect(() => {
-    if (apiError) {
-      Toast.toast({
-        title: apiError,
-        variant: 'destructive'
-      })
-    }
-  }, [])
-
   const onSubmit: SubmitHandler<FormFields> = data => {
     onFormSubmit(data)
   }
@@ -120,67 +108,71 @@ export function RepoCreatePage({
   return (
     <>
       <SandboxLayout.Main hasLeftPanel>
-        <SandboxLayout.Content paddingClassName="w-[570px] mx-auto py-11">
+        <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
           <Spacer size={5} />
           <Text className="tracking-tight" size={5} weight="medium">
             Create a new repository
           </Text>
           <Spacer size={2.5} />
-          <Text className="text-foreground-2 max-w-[476px] tracking-tight" size={2} as="p">
+          <Text className="text-foreground-2 max-w-[476px]" size={2} as="p">
             A repository contains all project files, including the revision history. Already have a project repository
             elsewhere?{' '}
-            <Link className="text-foreground-accent" to="../import" relative="path">
+            <StyledLink to="../import" relative="path">
               Import a repository.
-            </Link>
+            </StyledLink>
           </Text>
           <Spacer size={10} />
           <form onSubmit={handleSubmit(onSubmit)}>
             {/* NAME */}
-            <FormFieldSet.Root>
-              <FormFieldSet.ControlGroup>
-                <FormFieldSet.Label htmlFor="name">Name</FormFieldSet.Label>
+            <Fieldset>
+              <ControlGroup>
                 <Input
                   id="name"
+                  label="Name"
                   {...register('name')}
-                  theme={errors.name ? 'danger' : 'default'}
                   placeholder="Enter repository name"
                   size="md"
+                  error={errors.name && { theme: ErrorMessageTheme.ERROR, message: errors.name.message?.toString() }}
                   autoFocus
                 />
-                {errors.name && (
-                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
-                    {errors.name.message?.toString()}
-                  </FormFieldSet.Message>
-                )}
-              </FormFieldSet.ControlGroup>
+              </ControlGroup>
               <Spacer size={7} />
               {/* DESCRIPTION */}
-              <FormFieldSet.ControlGroup>
-                <FormFieldSet.Label htmlFor="description" optional>
-                  Description
-                </FormFieldSet.Label>
+              <ControlGroup>
                 <Textarea
                   id="description"
                   {...register('description')}
                   placeholder="Enter a description of this repository..."
+                  label="Description"
+                  error={
+                    errors.description && {
+                      theme: ErrorMessageTheme.ERROR,
+                      message: errors.description.message?.toString()
+                    }
+                  }
+                  optional
                 />
-                {errors.description && (
-                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
-                    {errors.description.message?.toString()}
-                  </FormFieldSet.Message>
-                )}
-              </FormFieldSet.ControlGroup>
-            </FormFieldSet.Root>
+              </ControlGroup>
+            </Fieldset>
             <Spacer size={7} />
 
             {/* GITIGNORE */}
-            <FormFieldSet.Root>
-              <FormFieldSet.ControlGroup>
-                <FormFieldSet.Label htmlFor="gitignore">Add a .gitignore</FormFieldSet.Label>
-                <Select value={gitignoreValue} onValueChange={value => handleSelectChange('gitignore', value)}>
-                  <SelectTrigger id="gitignore">
-                    <SelectValue placeholder="Select" />
-                  </SelectTrigger>
+            <Fieldset>
+              <ControlGroup>
+                <Select
+                  name="gitignore"
+                  value={gitignoreValue}
+                  onValueChange={value => handleSelectChange('gitignore', value)}
+                  placeholder="Select"
+                  label="Add a .gitignore"
+                  error={
+                    errors.gitignore && {
+                      theme: ErrorMessageTheme.ERROR,
+                      message: errors.gitignore.message?.toString()
+                    }
+                  }
+                  caption="Choose which files not to track from a list of templates."
+                >
                   <SelectContent>
                     {gitIgnoreOptions &&
                       gitIgnoreOptions?.map(option => {
@@ -192,22 +184,25 @@ export function RepoCreatePage({
                       })}
                   </SelectContent>
                 </Select>
-                <FormFieldSet.Caption>Choose which files not to track from a list of templates.</FormFieldSet.Caption>
-                {errors.gitignore && (
-                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
-                    {errors.gitignore.message?.toString()}
-                  </FormFieldSet.Message>
-                )}
-              </FormFieldSet.ControlGroup>
-              <Spacer size={7} />
+              </ControlGroup>
+              <Spacer size={6} />
 
               {/* LICENSE */}
-              <FormFieldSet.ControlGroup>
-                <FormFieldSet.Label htmlFor="license">Choose a license</FormFieldSet.Label>
-                <Select value={licenseValue} onValueChange={value => handleSelectChange('license', value)}>
-                  <SelectTrigger id="license">
-                    <SelectValue placeholder="Select" />
-                  </SelectTrigger>
+              <ControlGroup>
+                <Select
+                  name="license"
+                  value={licenseValue}
+                  onValueChange={value => handleSelectChange('license', value)}
+                  placeholder="Select"
+                  label="Choose a license"
+                  error={
+                    errors.license && {
+                      theme: ErrorMessageTheme.ERROR,
+                      message: errors.license.message?.toString()
+                    }
+                  }
+                  caption="A license tells others what they can and can't do with your code."
+                >
                   <SelectContent>
                     {licenseOptions &&
                       licenseOptions?.map(option => (
@@ -217,82 +212,77 @@ export function RepoCreatePage({
                       ))}
                   </SelectContent>
                 </Select>
-                <FormFieldSet.Caption>
-                  A license tells others what they can and can&apos;t do with your code.
-                </FormFieldSet.Caption>
-                {errors.license && (
-                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
-                    {errors.license.message?.toString()}
-                  </FormFieldSet.Message>
-                )}
-              </FormFieldSet.ControlGroup>
-            </FormFieldSet.Root>
+              </ControlGroup>
+            </Fieldset>
             <Spacer size={11} />
 
             {/* ACCESS */}
-            <FormFieldSet.Root>
-              <FormFieldSet.ControlGroup>
-                <FormFieldSet.Label htmlFor="access">Who has access</FormFieldSet.Label>
-                <RadioGroup className="mt-3.5" value={accessValue} onValueChange={handleAccessChange} id="access">
-                  <FormFieldSet.Option
-                    control={<RadioGroupItem value="1" id="access-public" />}
+            <Fieldset>
+              <ControlGroup>
+                <Text className="text-foreground-2 leading-none" size={2}>
+                  Who has access
+                </Text>
+                <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
+                  <RadioGroupItem
+                    control={<RadioButton className="mt-px" value="1" id="access-public" />}
                     id="access-public"
                     label="Public"
+                    ariaSelected={accessValue === '1'}
                     description="Anyone with access to the Gitness environment can clone this repo."
                   />
-                  <FormFieldSet.Option
-                    control={<RadioGroupItem value="2" id="access-private" />}
+                  <RadioGroupItem
+                    control={<RadioButton className="mt-px" value="2" id="access-private" />}
                     id="access-private"
                     label="Private"
+                    ariaSelected={accessValue === '2'}
                     description="You choose who can see and commit to this repository."
                   />
                 </RadioGroup>
                 {errors.access && (
-                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                  <FormErrorMessage className="mt-1" theme={ErrorMessageTheme.ERROR}>
                     {errors.access.message?.toString()}
-                  </FormFieldSet.Message>
+                  </FormErrorMessage>
                 )}
-              </FormFieldSet.ControlGroup>
-            </FormFieldSet.Root>
-            <Spacer size={12} />
+              </ControlGroup>
+            </Fieldset>
+            <Spacer size={11} />
 
             {/* README */}
-            <FormFieldSet.Root>
-              <FormFieldSet.ControlGroup>
-                <FormFieldSet.Label>Initialize this repository with</FormFieldSet.Label>
-                <Checkbox
-                  className="mt-3.5"
+            <Fieldset>
+              <ControlGroup>
+                <Text className="text-foreground-2 leading-none" size={2}>
+                  Initialize this repository with
+                </Text>
+                <RadioGroupItem
+                  className="mt-6"
+                  control={<Checkbox id="readme" checked={readmeValue} onCheckedChange={handleReadmeChange} />}
                   id="readme"
-                  checked={readmeValue}
-                  onCheckedChange={handleReadmeChange}
                   label="Add a README file"
+                  ariaSelected={accessValue === '1'}
+                  description={
+                    <>
+                      This is where you can write a long description for your project.{' '}
+                      <StyledLink className="inline-block" to="/">
+                        Learn more about README
+                      </StyledLink>
+                    </>
+                  }
                 />
-                <Text className="text-foreground-4 mt-1.5 pl-[26px] font-normal tracking-tight" as="p" size={2}>
-                  This is where you can write a long description for your project.{' '}
-                  <Link className="text-foreground-accent block" to="/">
-                    Learn more about README
-                  </Link>
-                </Text>
 
                 {errors.readme && (
-                  <FormFieldSet.Message theme={FormFieldSet.MessageTheme.ERROR}>
+                  <FormErrorMessage theme={ErrorMessageTheme.ERROR}>
                     {errors.readme.message?.toString()}
-                  </FormFieldSet.Message>
+                  </FormErrorMessage>
                 )}
-              </FormFieldSet.ControlGroup>
-            </FormFieldSet.Root>
-
-            {apiError && (
-              <Alert.Container variant="destructive" className="mb-8">
-                <Alert.Description>{apiError?.toString()}</Alert.Description>
-              </Alert.Container>
-            )}
+              </ControlGroup>
+            </Fieldset>
 
             {/* SUBMIT BUTTONS */}
-            <FormFieldSet.Root className="mt-[50px]">
-              <FormFieldSet.ControlGroup>
+            <Fieldset className="mt-[50px]">
+              <ControlGroup>
                 <ButtonGroup.Root>
                   <>
+                    {/* TODO: Improve loading state to avoid flickering */}
                     <Button type="submit" disabled={!isValid || isLoading}>
                       {!isLoading ? 'Create repository' : 'Creating repository...'}
                     </Button>
@@ -301,11 +291,9 @@ export function RepoCreatePage({
                     </Button>
                   </>
                 </ButtonGroup.Root>
-              </FormFieldSet.ControlGroup>
-            </FormFieldSet.Root>
+              </ControlGroup>
+            </Fieldset>
           </form>
-
-          <Toast.Toaster />
         </SandboxLayout.Content>
       </SandboxLayout.Main>
     </>
diff --git a/packages/views/src/components/form-field-set.tsx b/packages/views/src/components/form-field-set.tsx
index 8e3548855f..ada4f9467d 100644
--- a/packages/views/src/components/form-field-set.tsx
+++ b/packages/views/src/components/form-field-set.tsx
@@ -65,6 +65,7 @@ const themeClassMap: Record<MessageTheme, string> = {
   [MessageTheme.DEFAULT]: 'text-tertiary-background'
 }
 
+/** @deprecated: Use Fieldset from @harnessio/ui/components instead */
 function Root({ children, box, shaded, className }: RootProps) {
   return (
     <fieldset
@@ -105,6 +106,7 @@ function Item({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated: Use Label from @harnessio/ui/components instead */
 function Label({ htmlFor, required, children, className }: LabelProps) {
   return (
     <ShadLabel htmlFor={htmlFor} variant="sm" className={cn('text-primary/80 font-normal', className)}>
@@ -114,6 +116,7 @@ function Label({ htmlFor, required, children, className }: LabelProps) {
   )
 }
 
+/** @deprecated */
 function ControlGroup({ children, type, className }: ControlProps) {
   return (
     <div
@@ -126,6 +129,7 @@ function ControlGroup({ children, type, className }: ControlProps) {
   )
 }
 
+/** @deprecated: Use Text from @harnessio/ui/components instead */
 function Caption({ children, className }: CompProps) {
   return (
     <Text as="p" size={1} color="tertiaryBackground" role="note" aria-live="polite" className={cn('mt-1', className)}>
@@ -134,6 +138,7 @@ function Caption({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated: Use ErrorMessage from @harnessio/ui/components instead */
 function Message({ children, theme, className }: MessageProps) {
   const textClass = themeClassMap[theme]
   const role = theme === MessageTheme.ERROR ? 'alert' : 'status'
@@ -148,6 +153,7 @@ function Message({ children, theme, className }: MessageProps) {
   )
 }
 
+/** @deprecated: Use RadioGroupItem from @harnessio/ui/components instead */
 function Option({ control, id, label, description, className }: OptionProps) {
   return (
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -177,6 +183,7 @@ function Separator({ dashed, dotted, className }: SeparatorProps) {
   )
 }
 
+/** @deprecated: Use Spacer from @harnessio/ui/components instead */
 function Spacer({ className }: SpacerProps) {
   return <div className={cn('mt-1', className)} role="presentation" aria-hidden="true" />
 }

From 44c4bae65c7bdcd5adb8de36594c2e9bdc5ca88d Mon Sep 17 00:00:00 2001
From: iatopilskii <iatopilskii@gmail.com>
Date: Mon, 2 Dec 2024 20:40:56 +0100
Subject: [PATCH 03/10] fix: small fixes after rebase

---
 .../components/theme-selector/color-select.tsx  | 17 +++--------------
 .../theme-selector/contrast-select.tsx          |  7 +++----
 .../components/theme-selector/mode-select.tsx   |  7 +++----
 3 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/packages/ui/src/components/theme-selector/color-select.tsx b/packages/ui/src/components/theme-selector/color-select.tsx
index f854b9397e..42fbcf125b 100644
--- a/packages/ui/src/components/theme-selector/color-select.tsx
+++ b/packages/ui/src/components/theme-selector/color-select.tsx
@@ -1,14 +1,4 @@
-import {
-  Label,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue
-} from '..'
+import { Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator } from '..'
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ColorSelect({
@@ -26,14 +16,13 @@ export function ColorSelect({
     <div>
       <Label className="text-xs">Color</Label>
       <Select
+        name="color"
+        placeholder="Select a color theme"
         value={color}
         onValueChange={(color: ColorType) => {
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectTrigger>
-          <SelectValue placeholder="Select a color theme" />
-        </SelectTrigger>
         <SelectContent defaultValue={color}>
           <SelectItem value={ColorType.Standard}>Standard</SelectItem>
           <SelectSeparator />
diff --git a/packages/ui/src/components/theme-selector/contrast-select.tsx b/packages/ui/src/components/theme-selector/contrast-select.tsx
index ae63069186..8ee5236439 100644
--- a/packages/ui/src/components/theme-selector/contrast-select.tsx
+++ b/packages/ui/src/components/theme-selector/contrast-select.tsx
@@ -1,4 +1,4 @@
-import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..'
+import { Label, Select, SelectContent, SelectItem } from '..'
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ContrastSelect({
@@ -16,14 +16,13 @@ export function ContrastSelect({
     <div>
       <Label className="text-xs">Contrast</Label>
       <Select
+        name="contrast"
+        placeholder="Select a theme contrast"
         value={contrast}
         onValueChange={(contrast: ContrastType) => {
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectTrigger>
-          <SelectValue placeholder="Select a theme contrast" />
-        </SelectTrigger>
         <SelectContent defaultValue={contrast}>
           <SelectItem value={ContrastType.Standard}>Standard</SelectItem>
           <SelectItem value={ContrastType.Low}>Low</SelectItem>
diff --git a/packages/ui/src/components/theme-selector/mode-select.tsx b/packages/ui/src/components/theme-selector/mode-select.tsx
index 99d14221ec..25e830f087 100644
--- a/packages/ui/src/components/theme-selector/mode-select.tsx
+++ b/packages/ui/src/components/theme-selector/mode-select.tsx
@@ -1,4 +1,4 @@
-import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..'
+import { Label, Select, SelectContent, SelectItem } from '..'
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ModeSelect({
@@ -16,14 +16,13 @@ export function ModeSelect({
     <div>
       <Label className="text-xs">Mode</Label>
       <Select
+        name="mode"
+        placeholder="Select a theme mode"
         value={mode}
         onValueChange={(mode: ModeType) => {
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectTrigger>
-          <SelectValue placeholder="Select a theme mode" />
-        </SelectTrigger>
         <SelectContent defaultValue={mode}>
           <SelectItem value={ModeType.Light}>Light</SelectItem>
           <SelectItem value={ModeType.Dark}>Dark</SelectItem>

From 943af1d372c9f49a784224a24bfbe9ff5c120023 Mon Sep 17 00:00:00 2001
From: iatopilskii <iatopilskii@gmail.com>
Date: Mon, 2 Dec 2024 20:44:09 +0100
Subject: [PATCH 04/10] fix: fixes and refactoring after review

fix: linter fixes

fix: fix imports and small refactoring
---
 packages/canary/src/components/toast.tsx      | 111 ------
 packages/canary/src/components/toaster.tsx    |  24 --
 packages/canary/src/components/use-toast.ts   | 158 --------
 packages/canary/src/index.ts                  |   3 -
 packages/ui/src/components/button-group.tsx   |   4 +-
 packages/ui/src/components/button.tsx         |  14 +-
 packages/ui/src/components/checkbox.tsx       |  10 +-
 packages/ui/src/components/fieldset.tsx       |   4 +-
 packages/ui/src/components/index.ts           |   2 -
 packages/ui/src/components/radio-group.tsx    |  20 +-
 packages/ui/src/components/select.tsx         |  42 +--
 packages/ui/src/components/spacer.tsx         |   4 +-
 packages/ui/src/components/textarea.tsx       |  15 +-
 packages/ui/src/components/toast/index.ts     |   2 +
 packages/ui/src/components/toast/toast.tsx    |  46 +--
 packages/ui/src/components/toast/use-toast.ts |   6 +-
 .../ui/src/views/repo/repo-create/index.tsx   | 350 +++++++++---------
 17 files changed, 256 insertions(+), 559 deletions(-)
 delete mode 100644 packages/canary/src/components/toast.tsx
 delete mode 100644 packages/canary/src/components/toaster.tsx
 delete mode 100644 packages/canary/src/components/use-toast.ts

diff --git a/packages/canary/src/components/toast.tsx b/packages/canary/src/components/toast.tsx
deleted file mode 100644
index 097c6eaa70..0000000000
--- a/packages/canary/src/components/toast.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-ui/react-icons'
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  'data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground border',
-        destructive: 'destructive border-destructive bg-destructive text-destructive-foreground group'
-      }
-    },
-    defaultVariants: {
-      variant: 'default'
-    }
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50',
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      'text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <Cross2Icon className="size-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold [&+div]:text-xs', className)} {...props} />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction
-}
diff --git a/packages/canary/src/components/toaster.tsx b/packages/canary/src/components/toaster.tsx
deleted file mode 100644
index d54f4640f6..0000000000
--- a/packages/canary/src/components/toaster.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/toast'
-import { useToast } from '@/components/use-toast'
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
diff --git a/packages/canary/src/components/use-toast.ts b/packages/canary/src/components/use-toast.ts
deleted file mode 100644
index d5237a9e6b..0000000000
--- a/packages/canary/src/components/use-toast.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import * as React from 'react'
-
-import type { ToastActionElement, ToastProps } from '@/components/toast'
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-export const actionTypes = {
-  ADD_TOAST: 'ADD_TOAST',
-  UPDATE_TOAST: 'UPDATE_TOAST',
-  DISMISS_TOAST: 'DISMISS_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST'
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type Action =
-  | { type: 'ADD_TOAST'; toast: ToasterToast }
-  | { type: 'UPDATE_TOAST'; toast: Partial<ToasterToast> }
-  | { type: 'DISMISS_TOAST'; toastId?: ToasterToast['id'] }
-  | { type: 'REMOVE_TOAST'; toastId?: ToasterToast['id'] }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: 'REMOVE_TOAST',
-      toastId: toastId
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'ADD_TOAST':
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
-      }
-
-    case 'UPDATE_TOAST':
-      return {
-        ...state,
-        toasts: state.toasts.map(t => (t.id === action.toast.id ? { ...t, ...action.toast } : t))
-      }
-
-    case 'DISMISS_TOAST': {
-      const { toastId } = action
-
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach(toast => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map(t => (t.id === toastId || toastId === undefined ? { ...t, open: false } : t))
-      }
-    }
-
-    case 'REMOVE_TOAST':
-      if (action.toastId === undefined) {
-        return { ...state, toasts: [] }
-      }
-      return { ...state, toasts: state.toasts.filter(t => t.id !== action.toastId) }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach(listener => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, 'id'>
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: 'UPDATE_TOAST',
-      toast: { ...props, id }
-    })
-  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
-
-  dispatch({
-    type: 'ADD_TOAST',
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: open => {
-        if (!open) dismiss()
-      }
-    }
-  })
-
-  return {
-    id,
-    dismiss,
-    update
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId })
-  }
-}
-
-export { useToast, toast }
diff --git a/packages/canary/src/index.ts b/packages/canary/src/index.ts
index c9afd6a081..be494c8fb6 100644
--- a/packages/canary/src/index.ts
+++ b/packages/canary/src/index.ts
@@ -38,12 +38,9 @@ export * from './components/switch'
 export * from './components/table'
 export * from './components/tabs'
 export * from './components/text'
-export * from './components/toast'
-// export * from './components/toaster' Duplicate with sooner! Use sooner's Toaster instead
 export * from './components/toggle-group'
 export * from './components/toggle'
 export * from './components/tooltip'
-export * from './components/use-toast'
 export * from './lib/utils'
 export * from './lib/CanaryOutletFactory'
 export * from './components/treeview'
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
index e8410296cc..b5d4b70ed5 100644
--- a/packages/ui/src/components/button-group.tsx
+++ b/packages/ui/src/components/button-group.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
+import { ReactNode } from 'react'
 
 import { cn } from '@utils/cn'
 
 interface ButtonGroupProps {
-  children: React.ReactNode
+  children: ReactNode
   direction?: 'horizontal' | 'vertical'
   className?: string
   spacing?: string
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index bdf1872b69..0cce782b36 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
 import { CanaryOutletFactory, CanaryOutletName } from '@utils/CanaryOutletFactory'
@@ -14,7 +14,7 @@ const buttonVariants = cva(
           'bg-background-5 text-foreground-6 hover:bg-background-10 disabled:bg-background-6 disabled:text-foreground-9',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
         outline:
-          'border-borders-2 hover:border-borders-6 text-foreground-2 hover:text-foreground-8 border bg-transparent',
+          'border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8 border bg-transparent',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
         tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
@@ -66,17 +66,15 @@ const buttonVariants = cva(
   }
 )
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
   loading?: boolean
-  spinner?: React.ReactNode
-  dropdown?: React.ReactNode
+  spinner?: ReactNode
+  dropdown?: ReactNode
   gradientType?: string
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index 00f6caf62c..4329a2d05c 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { cn } from '@utils/cn'
@@ -6,16 +6,16 @@ import { cn } from '@utils/cn'
 import { Icon } from './icon'
 import { Label } from './label'
 
-interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
   label?: string
 }
 
-const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
   ({ className, label, ...props }, ref) => (
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="border-icons-1 data-[state=checked]:bg-primary data-[state=checked]:border-icons-2 data-[state=checked]:text-primary-foreground hover:border-icons-3 disabled:border-icons-4 peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
+        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
@@ -23,7 +23,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
       {label && (
-        <Label className="text-foreground-1 font-normal leading-tight tracking-tight" htmlFor={props.id}>
+        <Label className="leading-tight" theme="foreground-1" htmlFor={props.id}>
           {label}
         </Label>
       )}
diff --git a/packages/ui/src/components/fieldset.tsx b/packages/ui/src/components/fieldset.tsx
index 9430c6cb17..1eedab4c1e 100644
--- a/packages/ui/src/components/fieldset.tsx
+++ b/packages/ui/src/components/fieldset.tsx
@@ -1,6 +1,8 @@
+import { HTMLAttributes } from 'react'
+
 import { cn } from '@utils/cn'
 
-interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement> {
+interface FieldsetProps extends HTMLAttributes<HTMLFieldSetElement> {
   box?: boolean
   shaded?: boolean
 }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index c61783bf64..57d6788803 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -25,9 +25,7 @@ export * from './no-data'
 export * from './tabs'
 export * from './command'
 export * from './search-files'
-export * from './input'
 export * from './radio-group'
-export * from './textarea'
 export * from './checkbox'
 export * from './toast'
 export * from './styled-link'
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
index 925b24ced3..f147f1aba6 100644
--- a/packages/ui/src/components/radio-group.tsx
+++ b/packages/ui/src/components/radio-group.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ComponentPropsWithoutRef, ElementRef, FC, forwardRef, ReactElement, ReactNode } from 'react'
 
 import { CheckIcon } from '@radix-ui/react-icons'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
@@ -8,25 +8,25 @@ import { Checkbox } from './checkbox'
 import { Label } from './label'
 import { Text } from './text'
 
-type ControlType = React.ReactElement<typeof RadioGroupItem> | React.ReactElement<typeof Checkbox>
+type ControlType = ReactElement<typeof RadioGroupItem> | ReactElement<typeof Checkbox>
 interface RadioGroupItemProps {
   control: ControlType
   id: string
   label?: string
-  description?: string | React.ReactNode
+  description?: string | ReactNode
   className?: string
   ariaSelected?: boolean
 }
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+const RadioGroup = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
   return <RadioGroupPrimitive.Root className={cn('grid gap-5', className)} {...props} ref={ref} />
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-const RadioGroupItem = ({ control, id, label, description, ariaSelected, className }: RadioGroupItemProps) => {
+const RadioGroupItem: FC<RadioGroupItemProps> = ({ control, id, label, description, ariaSelected, className }) => {
   return (
     <div
       className={cn('flex items-start', className)}
@@ -56,9 +56,9 @@ const RadioGroupItem = ({ control, id, label, description, ariaSelected, classNa
   )
 }
 
-const RadioButton = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+const RadioButton = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index a8c78d5d5d..66cc26a149 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -1,6 +1,6 @@
 // ToDo: Need to be reviewed by the XD team
 
-import * as React from 'react'
+import { Children, ComponentPropsWithoutRef, ElementRef, FC, forwardRef, PropsWithChildren, ReactNode } from 'react'
 
 import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons'
 import * as SelectPrimitive from '@radix-ui/react-select'
@@ -15,15 +15,15 @@ interface SelectError {
   message?: string
 }
 
-interface SelectProps extends React.PropsWithChildren, SelectPrimitive.SelectProps {
+interface SelectProps extends PropsWithChildren, SelectPrimitive.SelectProps {
   label?: string
   error?: SelectError
-  caption?: React.ReactNode
+  caption?: ReactNode
   disabled?: boolean
   placeholder: string
 }
 
-const Select: React.FC<SelectProps> = ({
+const Select: FC<SelectProps> = ({
   name,
   label,
   error,
@@ -35,7 +35,7 @@ const Select: React.FC<SelectProps> = ({
 }) => (
   <SelectPrimitive.Root {...props}>
     {label && (
-      <Label className="mb-2.5" theme={disabled ? 'disabled' : 'secondary'} htmlFor={name}>
+      <Label className="mb-2.5" theme={disabled ? 'foreground-9' : 'foreground-2'} htmlFor={name}>
         {label}
       </Label>
     )}
@@ -61,9 +61,9 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string }
+const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string }
 >(({ className, children, iconClassName, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
@@ -81,9 +81,9 @@ const SelectTrigger = React.forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
@@ -104,24 +104,24 @@ const SelectContent = React.forwardRef<
             'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
-        {React.Children.count(children) > 0 ? children : <div className="pl-2">Nothing to select</div>}
+        {Children.count(children) > 0 ? children : <div className="pl-2">Nothing to select</div>}
       </SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ))
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
 ))
 SelectLabel.displayName = SelectPrimitive.Label.displayName
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
@@ -141,9 +141,9 @@ const SelectItem = React.forwardRef<
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName
 
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
 ))
diff --git a/packages/ui/src/components/spacer.tsx b/packages/ui/src/components/spacer.tsx
index 36ac9c9d3f..0130c55110 100644
--- a/packages/ui/src/components/spacer.tsx
+++ b/packages/ui/src/components/spacer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ComponentProps } from 'react'
 
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
@@ -28,7 +28,7 @@ const spacerVariants = cva('mt-4 block', {
   }
 })
 
-export interface SpacerProps extends React.ComponentProps<'span'>, VariantProps<typeof spacerVariants> {}
+export interface SpacerProps extends ComponentProps<'span'>, VariantProps<typeof spacerVariants> {}
 
 const Spacer = ({ className, size, ...props }: SpacerProps) => (
   <span aria-hidden className={cn(spacerVariants({ size, className }))} {...props}></span>
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 9b8f3c1006..38e87aab7d 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
+import { forwardRef, ReactNode, TextareaHTMLAttributes } from 'react'
 
 import { cn } from '@utils/cn'
 
+import { ControlGroup } from './control-group'
 import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
 import { Label } from './label'
 import { Text } from './text'
@@ -10,19 +11,19 @@ interface TextareaError {
   theme: ErrorMessageTheme
   message?: string
 }
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string
-  caption?: React.ReactNode
+  caption?: ReactNode
   error?: TextareaError
   optional?: boolean
 }
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ id, disabled, label, caption, error, optional, className, ...props }, ref) => {
     return (
-      <>
+      <ControlGroup>
         {label && (
-          <Label className="mb-2.5" theme={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
+          <Label className="mb-2.5" theme={disabled ? 'foreground-9' : 'foreground-2'} optional={optional} htmlFor={id}>
             {label}
           </Label>
         )}
@@ -49,7 +50,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             {caption}
           </Text>
         )}
-      </>
+      </ControlGroup>
     )
   }
 )
diff --git a/packages/ui/src/components/toast/index.ts b/packages/ui/src/components/toast/index.ts
index 23759cca6e..f2c80820b8 100644
--- a/packages/ui/src/components/toast/index.ts
+++ b/packages/ui/src/components/toast/index.ts
@@ -1,2 +1,4 @@
+// TODO: Rewrite this to use Sooners Toaster
+
 export { toast } from './use-toast'
 export * from './toaster'
diff --git a/packages/ui/src/components/toast/toast.tsx b/packages/ui/src/components/toast/toast.tsx
index c8758ad0cd..d05c246359 100644
--- a/packages/ui/src/components/toast/toast.tsx
+++ b/packages/ui/src/components/toast/toast.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef, ReactElement } from 'react'
 
 import { Cross2Icon } from '@radix-ui/react-icons'
 import * as ToastPrimitives from '@radix-ui/react-toast'
@@ -7,9 +7,9 @@ import { cva, type VariantProps } from 'class-variance-authority'
 
 const ToastProvider = ToastPrimitives.Provider
 
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+const ToastViewport = forwardRef<
+  ElementRef<typeof ToastPrimitives.Viewport>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
@@ -27,8 +27,8 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-background-3 border-borders-1 text-foreground [&_svg]:text-icons-1',
-        destructive: 'bg-foreground-danger text-foreground-1 [&_svg]:text-icons-2 border-borders-danger'
+        default: 'border-borders-1 bg-background-3 text-foreground [&_svg]:text-icons-1',
+        destructive: 'border-borders-danger bg-foreground-danger text-foreground-1 [&_svg]:text-icons-2'
       }
     },
     defaultVariants: {
@@ -37,17 +37,17 @@ const toastVariants = cva(
   }
 )
 
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+const Toast = forwardRef<
+  ElementRef<typeof ToastPrimitives.Root>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
 })
 Toast.displayName = ToastPrimitives.Root.displayName
 
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+const ToastAction = forwardRef<
+  ElementRef<typeof ToastPrimitives.Action>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Action
     ref={ref}
@@ -60,9 +60,9 @@ const ToastAction = React.forwardRef<
 ))
 ToastAction.displayName = ToastPrimitives.Action.displayName
 
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+const ToastClose = forwardRef<
+  ElementRef<typeof ToastPrimitives.Close>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
@@ -78,9 +78,9 @@ const ToastClose = React.forwardRef<
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
 
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+const ToastTitle = forwardRef<
+  ElementRef<typeof ToastPrimitives.Title>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
@@ -90,17 +90,17 @@ const ToastTitle = React.forwardRef<
 ))
 ToastTitle.displayName = ToastPrimitives.Title.displayName
 
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+const ToastDescription = forwardRef<
+  ElementRef<typeof ToastPrimitives.Description>,
+  ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
 ))
 ToastDescription.displayName = ToastPrimitives.Description.displayName
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = ComponentPropsWithoutRef<typeof Toast>
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = ReactElement<typeof ToastAction>
 
 export {
   type ToastProps,
diff --git a/packages/ui/src/components/toast/use-toast.ts b/packages/ui/src/components/toast/use-toast.ts
index 4cb28e37cf..700d4b9445 100644
--- a/packages/ui/src/components/toast/use-toast.ts
+++ b/packages/ui/src/components/toast/use-toast.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
 import type { ToastActionElement, ToastProps } from './toast'
 
@@ -136,9 +136,9 @@ function toast({ ...props }: Toast) {
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = useState<State>(memoryState)
 
-  React.useEffect(() => {
+  useEffect(() => {
     listeners.push(setState)
     return () => {
       const index = listeners.indexOf(setState)
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
index eaba96c84b..ee07b6cee2 100644
--- a/packages/ui/src/views/repo/repo-create/index.tsx
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -106,196 +106,188 @@ export function RepoCreatePage({
   }
 
   return (
-    <>
-      <SandboxLayout.Main hasLeftPanel>
-        <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
-          <Spacer size={5} />
-          <Text className="tracking-tight" size={5} weight="medium">
-            Create a new repository
-          </Text>
-          <Spacer size={2.5} />
-          <Text className="text-foreground-2 max-w-[476px]" size={2} as="p">
-            A repository contains all project files, including the revision history. Already have a project repository
-            elsewhere?{' '}
-            <StyledLink to="../import" relative="path">
-              Import a repository.
-            </StyledLink>
-          </Text>
-          <Spacer size={10} />
-          <form onSubmit={handleSubmit(onSubmit)}>
-            {/* NAME */}
-            <Fieldset>
-              <ControlGroup>
-                <Input
-                  id="name"
-                  label="Name"
-                  {...register('name')}
-                  placeholder="Enter repository name"
-                  size="md"
-                  error={errors.name && { theme: ErrorMessageTheme.ERROR, message: errors.name.message?.toString() }}
-                  autoFocus
-                />
-              </ControlGroup>
-              <Spacer size={7} />
-              {/* DESCRIPTION */}
-              <ControlGroup>
-                <Textarea
-                  id="description"
-                  {...register('description')}
-                  placeholder="Enter a description of this repository..."
-                  label="Description"
-                  error={
-                    errors.description && {
-                      theme: ErrorMessageTheme.ERROR,
-                      message: errors.description.message?.toString()
-                    }
-                  }
-                  optional
-                />
-              </ControlGroup>
-            </Fieldset>
+    <SandboxLayout.Main hasLeftPanel>
+      <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
+        <Spacer size={5} />
+        <Text className="tracking-tight" size={5} weight="medium">
+          Create a new repository
+        </Text>
+        <Spacer size={2.5} />
+        <Text className="text-foreground-2 max-w-[476px]" size={2} as="p">
+          A repository contains all project files, including the revision history. Already have a project repository
+          elsewhere?{' '}
+          <StyledLink to="../import" relative="path">
+            Import a repository.
+          </StyledLink>
+        </Text>
+        <Spacer size={10} />
+        <form onSubmit={handleSubmit(onSubmit)}>
+          {/* NAME */}
+          <Fieldset>
+            <Input
+              id="name"
+              label="Name"
+              {...register('name')}
+              placeholder="Enter repository name"
+              size={36}
+              error={errors.name && { theme: ErrorMessageTheme.ERROR, message: errors.name.message?.toString() }}
+              autoFocus
+            />
             <Spacer size={7} />
+            {/* DESCRIPTION */}
+            <Textarea
+              id="description"
+              {...register('description')}
+              placeholder="Enter a description of this repository..."
+              label="Description"
+              error={
+                errors.description && {
+                  theme: ErrorMessageTheme.ERROR,
+                  message: errors.description.message?.toString()
+                }
+              }
+              optional
+            />
+          </Fieldset>
+          <Spacer size={7} />
 
-            {/* GITIGNORE */}
-            <Fieldset>
-              <ControlGroup>
-                <Select
-                  name="gitignore"
-                  value={gitignoreValue}
-                  onValueChange={value => handleSelectChange('gitignore', value)}
-                  placeholder="Select"
-                  label="Add a .gitignore"
-                  error={
-                    errors.gitignore && {
-                      theme: ErrorMessageTheme.ERROR,
-                      message: errors.gitignore.message?.toString()
-                    }
+          {/* GITIGNORE */}
+          <Fieldset>
+            <ControlGroup>
+              <Select
+                name="gitignore"
+                value={gitignoreValue}
+                onValueChange={value => handleSelectChange('gitignore', value)}
+                placeholder="Select"
+                label="Add a .gitignore"
+                error={
+                  errors.gitignore && {
+                    theme: ErrorMessageTheme.ERROR,
+                    message: errors.gitignore.message?.toString()
                   }
-                  caption="Choose which files not to track from a list of templates."
-                >
-                  <SelectContent>
-                    {gitIgnoreOptions &&
-                      gitIgnoreOptions?.map(option => {
-                        return (
-                          <SelectItem key={option} value={option}>
-                            {option}
-                          </SelectItem>
-                        )
-                      })}
-                  </SelectContent>
-                </Select>
-              </ControlGroup>
-              <Spacer size={6} />
-
-              {/* LICENSE */}
-              <ControlGroup>
-                <Select
-                  name="license"
-                  value={licenseValue}
-                  onValueChange={value => handleSelectChange('license', value)}
-                  placeholder="Select"
-                  label="Choose a license"
-                  error={
-                    errors.license && {
-                      theme: ErrorMessageTheme.ERROR,
-                      message: errors.license.message?.toString()
-                    }
-                  }
-                  caption="A license tells others what they can and can't do with your code."
-                >
-                  <SelectContent>
-                    {licenseOptions &&
-                      licenseOptions?.map(option => (
-                        <SelectItem key={option.value} value={option.value ?? ''}>
-                          {option.label}
+                }
+                caption="Choose which files not to track from a list of templates."
+              >
+                <SelectContent>
+                  {gitIgnoreOptions &&
+                    gitIgnoreOptions?.map(option => {
+                      return (
+                        <SelectItem key={option} value={option}>
+                          {option}
                         </SelectItem>
-                      ))}
-                  </SelectContent>
-                </Select>
-              </ControlGroup>
-            </Fieldset>
-            <Spacer size={11} />
+                      )
+                    })}
+                </SelectContent>
+              </Select>
+            </ControlGroup>
+            <Spacer size={6} />
 
-            {/* ACCESS */}
-            <Fieldset>
-              <ControlGroup>
-                <Text className="text-foreground-2 leading-none" size={2}>
-                  Who has access
-                </Text>
-                <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
-                  <RadioGroupItem
-                    control={<RadioButton className="mt-px" value="1" id="access-public" />}
-                    id="access-public"
-                    label="Public"
-                    ariaSelected={accessValue === '1'}
-                    description="Anyone with access to the Gitness environment can clone this repo."
-                  />
-                  <RadioGroupItem
-                    control={<RadioButton className="mt-px" value="2" id="access-private" />}
-                    id="access-private"
-                    label="Private"
-                    ariaSelected={accessValue === '2'}
-                    description="You choose who can see and commit to this repository."
-                  />
-                </RadioGroup>
-                {errors.access && (
-                  <FormErrorMessage className="mt-1" theme={ErrorMessageTheme.ERROR}>
-                    {errors.access.message?.toString()}
-                  </FormErrorMessage>
-                )}
-              </ControlGroup>
-            </Fieldset>
-            <Spacer size={11} />
+            {/* LICENSE */}
+            <ControlGroup>
+              <Select
+                name="license"
+                value={licenseValue}
+                onValueChange={value => handleSelectChange('license', value)}
+                placeholder="Select"
+                label="Choose a license"
+                error={
+                  errors.license && {
+                    theme: ErrorMessageTheme.ERROR,
+                    message: errors.license.message?.toString()
+                  }
+                }
+                caption="A license tells others what they can and can't do with your code."
+              >
+                <SelectContent>
+                  {licenseOptions &&
+                    licenseOptions?.map(option => (
+                      <SelectItem key={option.value} value={option.value ?? ''}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </ControlGroup>
+          </Fieldset>
+          <Spacer size={11} />
 
-            {/* README */}
-            <Fieldset>
-              <ControlGroup>
-                <Text className="text-foreground-2 leading-none" size={2}>
-                  Initialize this repository with
-                </Text>
+          {/* ACCESS */}
+          <Fieldset>
+            <ControlGroup>
+              <Text className="text-foreground-2 leading-none" size={2}>
+                Who has access
+              </Text>
+              <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
                 <RadioGroupItem
-                  className="mt-6"
-                  control={<Checkbox id="readme" checked={readmeValue} onCheckedChange={handleReadmeChange} />}
-                  id="readme"
-                  label="Add a README file"
+                  control={<RadioButton className="mt-px" value="1" id="access-public" />}
+                  id="access-public"
+                  label="Public"
                   ariaSelected={accessValue === '1'}
-                  description={
-                    <>
-                      This is where you can write a long description for your project.{' '}
-                      <StyledLink className="inline-block" to="/">
-                        Learn more about README
-                      </StyledLink>
-                    </>
-                  }
+                  description="Anyone with access to the Gitness environment can clone this repo."
                 />
+                <RadioGroupItem
+                  control={<RadioButton className="mt-px" value="2" id="access-private" />}
+                  id="access-private"
+                  label="Private"
+                  ariaSelected={accessValue === '2'}
+                  description="You choose who can see and commit to this repository."
+                />
+              </RadioGroup>
+              {errors.access && (
+                <FormErrorMessage className="mt-1" theme={ErrorMessageTheme.ERROR}>
+                  {errors.access.message?.toString()}
+                </FormErrorMessage>
+              )}
+            </ControlGroup>
+          </Fieldset>
+          <Spacer size={11} />
 
-                {errors.readme && (
-                  <FormErrorMessage theme={ErrorMessageTheme.ERROR}>
-                    {errors.readme.message?.toString()}
-                  </FormErrorMessage>
-                )}
-              </ControlGroup>
-            </Fieldset>
-
-            {/* SUBMIT BUTTONS */}
-            <Fieldset className="mt-[50px]">
-              <ControlGroup>
-                <ButtonGroup.Root>
+          {/* README */}
+          <Fieldset>
+            <ControlGroup>
+              <Text className="text-foreground-2 leading-none" size={2}>
+                Initialize this repository with
+              </Text>
+              <RadioGroupItem
+                className="mt-6"
+                control={<Checkbox id="readme" checked={readmeValue} onCheckedChange={handleReadmeChange} />}
+                id="readme"
+                label="Add a README file"
+                ariaSelected={accessValue === '1'}
+                description={
                   <>
-                    {/* TODO: Improve loading state to avoid flickering */}
-                    <Button type="submit" disabled={!isValid || isLoading}>
-                      {!isLoading ? 'Create repository' : 'Creating repository...'}
-                    </Button>
-                    <Button type="button" variant="outline" onClick={handleCancel}>
-                      Cancel
-                    </Button>
+                    This is where you can write a long description for your project.{' '}
+                    <StyledLink className="inline-block" to="/">
+                      Learn more about README
+                    </StyledLink>
                   </>
-                </ButtonGroup.Root>
-              </ControlGroup>
-            </Fieldset>
-          </form>
-        </SandboxLayout.Content>
-      </SandboxLayout.Main>
-    </>
+                }
+              />
+
+              {errors.readme && (
+                <FormErrorMessage theme={ErrorMessageTheme.ERROR}>{errors.readme.message?.toString()}</FormErrorMessage>
+              )}
+            </ControlGroup>
+          </Fieldset>
+
+          {/* SUBMIT BUTTONS */}
+          <Fieldset className="mt-[50px]">
+            <ControlGroup>
+              <ButtonGroup.Root>
+                <>
+                  {/* TODO: Improve loading state to avoid flickering */}
+                  <Button type="submit" disabled={!isValid || isLoading}>
+                    {!isLoading ? 'Create repository' : 'Creating repository...'}
+                  </Button>
+                  <Button type="button" variant="outline" onClick={handleCancel}>
+                    Cancel
+                  </Button>
+                </>
+              </ButtonGroup.Root>
+            </ControlGroup>
+          </Fieldset>
+        </form>
+      </SandboxLayout.Content>
+    </SandboxLayout.Main>
   )
 }

From 93747d2e2d5807ac6646ff92c3fd49e33e1ff57d Mon Sep 17 00:00:00 2001
From: Ilya Topilskii <ilya@pixelpoint.io>
Date: Tue, 3 Dec 2024 12:16:29 +0100
Subject: [PATCH 05/10] refactor: update naming in label variants constant

---
 packages/ui/src/components/checkbox.tsx | 2 +-
 packages/ui/src/components/select.tsx   | 2 +-
 packages/ui/src/components/textarea.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index 4329a2d05c..ecb6573c70 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -23,7 +23,7 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
       {label && (
-        <Label className="leading-tight" theme="foreground-1" htmlFor={props.id}>
+        <Label className="leading-tight" color="foreground-1" htmlFor={props.id}>
           {label}
         </Label>
       )}
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 66cc26a149..75a075a68d 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -35,7 +35,7 @@ const Select: FC<SelectProps> = ({
 }) => (
   <SelectPrimitive.Root {...props}>
     {label && (
-      <Label className="mb-2.5" theme={disabled ? 'foreground-9' : 'foreground-2'} htmlFor={name}>
+      <Label className="mb-2.5" color={disabled ? 'foreground-9' : 'foreground-2'} htmlFor={name}>
         {label}
       </Label>
     )}
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 38e87aab7d..79e6070cac 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -23,7 +23,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <ControlGroup>
         {label && (
-          <Label className="mb-2.5" theme={disabled ? 'foreground-9' : 'foreground-2'} optional={optional} htmlFor={id}>
+          <Label className="mb-2.5" color={disabled ? 'foreground-9' : 'foreground-2'} optional={optional} htmlFor={id}>
             {label}
           </Label>
         )}

From 0174c4785f281683a1e4e2f2fcc7159242a5437e Mon Sep 17 00:00:00 2001
From: Ilya Topilskii <iatopilskii@gmail.com>
Date: Tue, 3 Dec 2024 16:56:55 +0100
Subject: [PATCH 06/10] feat: update input errors ui

---
 packages/ui/src/components/select.tsx   | 2 +-
 packages/ui/src/components/textarea.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 75a075a68d..9a099db36b 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -44,7 +44,7 @@ const Select: FC<SelectProps> = ({
     </SelectTrigger>
     {children}
     {error && (
-      <FormErrorMessage className="mt-1" theme={error.theme}>
+      <FormErrorMessage className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
         {error.message}
       </FormErrorMessage>
     )}
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 79e6070cac..7a0fd47891 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -41,7 +41,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...props}
         />
         {error && (
-          <FormErrorMessage className="mt-1" theme={error.theme}>
+          <FormErrorMessage className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
             {error.message}
           </FormErrorMessage>
         )}

From e23533e509e5ac38045a737081fa83dade30247f Mon Sep 17 00:00:00 2001
From: Ilya Topilskii <iatopilskii@gmail.com>
Date: Wed, 4 Dec 2024 12:40:59 +0100
Subject: [PATCH 07/10] feat: transfer form-field-set components to
 ui/components

---
 packages/ui/src/components/button.tsx         |  8 +--
 packages/ui/src/components/checkbox.tsx       |  2 +-
 packages/ui/src/components/form-legend.tsx    | 24 +++++++++
 packages/ui/src/components/form-separator.tsx | 17 +++++++
 packages/ui/src/components/input.tsx          |  6 +--
 packages/ui/src/components/label.tsx          |  2 +-
 .../components/manage-navigation/index.tsx    |  2 +-
 packages/ui/src/components/radio-group.tsx    |  7 +--
 packages/ui/src/components/select.tsx         |  2 +-
 packages/ui/src/components/textarea.tsx       |  2 +-
 .../components/pull-request-compare-form.tsx  | 50 +++++++++----------
 .../branch-selector-dropdown.tsx              |  6 +--
 .../ui/src/views/repo/repo-create/index.tsx   |  6 +--
 .../repo-summary/components/summary-panel.tsx |  6 +--
 .../views/src/components/form-field-set.tsx   |  4 ++
 15 files changed, 93 insertions(+), 51 deletions(-)
 create mode 100644 packages/ui/src/components/form-legend.tsx
 create mode 100644 packages/ui/src/components/form-separator.tsx

diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index 0cce782b36..cacb86d8ce 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -12,11 +12,11 @@ const buttonVariants = cva(
       variant: {
         default:
           'bg-background-5 text-foreground-6 hover:bg-background-10 disabled:bg-background-6 disabled:text-foreground-9',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8 border bg-transparent',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
-        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
+          'border border-borders-2 bg-transparent text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index ecb6573c70..513aef78e3 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -15,7 +15,7 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
+        className="peer size-4 shrink-0 rounded-sm border border-icons-1 shadow hover:border-icons-3 disabled:cursor-not-allowed disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
diff --git a/packages/ui/src/components/form-legend.tsx b/packages/ui/src/components/form-legend.tsx
new file mode 100644
index 0000000000..9deaccd370
--- /dev/null
+++ b/packages/ui/src/components/form-legend.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react'
+
+import { Text } from '@components/text'
+
+interface FormLegendProps {
+  title: ReactNode
+  description?: ReactNode
+  className?: string
+}
+
+export function FormLegend({ title, description, className }: FormLegendProps) {
+  return (
+    <div className={className}>
+      <Text size={3} weight={'medium'} as="p" role="heading">
+        {title}
+      </Text>
+      {description && (
+        <Text size={2} as="p" id="fieldset-description">
+          {description}
+        </Text>
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/form-separator.tsx b/packages/ui/src/components/form-separator.tsx
new file mode 100644
index 0000000000..626d09de10
--- /dev/null
+++ b/packages/ui/src/components/form-separator.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@utils/cn'
+
+interface FormSeparatorProps {
+  dashed?: boolean
+  dotted?: boolean
+  className?: string
+}
+
+export function FormSeparator({ dashed, dotted, className }: FormSeparatorProps) {
+  return (
+    <div
+      className={cn('border-b', { 'border-dashed': dashed, 'border-dotted': dotted }, className)}
+      role="separator"
+      aria-orientation="horizontal"
+    />
+  )
+}
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 7497df11c0..93e085f176 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -12,11 +12,11 @@ export interface BaseInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
 
-const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled:cursor-not-allowed', {
+const inputVariants = cva('bg-transparent px-2.5 py-1 text-foreground-1 disabled:cursor-not-allowed', {
   variants: {
     variant: {
       default:
-        'placeholder:text-foreground-4 flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none',
+        'flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none',
       extended: 'grow border-none focus-visible:outline-none'
     },
     size: {
@@ -80,7 +80,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           </FormErrorMessage>
         )}
         {caption && (
-          <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+          <Text className="mt-1 leading-snug text-foreground-4" size={2}>
             {caption}
           </Text>
         )}
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
index 1bb52ba5b8..3468b43dfb 100644
--- a/packages/ui/src/components/label.tsx
+++ b/packages/ui/src/components/label.tsx
@@ -41,7 +41,7 @@ interface LabelProps extends VariantProps<typeof labelVariants>, PropsWithChildr
 const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => {
   return (
     <LabelRoot htmlFor={htmlFor} variant={variant} color={color} className={className}>
-      {children} {optional && <span className="text-foreground-7 align-top">(optional)</span>}
+      {children} {optional && <span className="align-top text-foreground-7">(optional)</span>}
     </LabelRoot>
   )
 }
diff --git a/packages/ui/src/components/manage-navigation/index.tsx b/packages/ui/src/components/manage-navigation/index.tsx
index 123e31f24f..4a131dc4a8 100644
--- a/packages/ui/src/components/manage-navigation/index.tsx
+++ b/packages/ui/src/components/manage-navigation/index.tsx
@@ -127,7 +127,7 @@ export const ManageNavigation = ({
         </AlertDialogHeader>
         <ScrollArea className="-mx-5 -mb-5 mt-1">
           <div className="px-5">
-            <Text className="text-foreground-7 inline-block leading-none" size={1}>
+            <Text className="inline-block leading-none text-foreground-7" size={1}>
               Pinned
             </Text>
             {!currentPinnedItems.length ? (
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
index f147f1aba6..e8ad3108c2 100644
--- a/packages/ui/src/components/radio-group.tsx
+++ b/packages/ui/src/components/radio-group.tsx
@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ElementRef, FC, forwardRef, ReactElement, ReactNode } from 'react'
 
-import { CheckIcon } from '@radix-ui/react-icons'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cn } from '@utils/cn'
 
@@ -64,14 +63,12 @@ const RadioButton = forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4',
+        'relative border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4 flex items-center justify-center',
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="size-3.5 fill-icons-2" />
-      </RadioGroupPrimitive.Indicator>
+      <RadioGroupPrimitive.Indicator className="bg-primary size-2 rounded-full" />
     </RadioGroupPrimitive.Item>
   )
 })
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 9a099db36b..238135d89a 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -49,7 +49,7 @@ const Select: FC<SelectProps> = ({
       </FormErrorMessage>
     )}
     {caption && (
-      <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+      <Text className="mt-1 leading-snug text-foreground-4" size={2}>
         {caption}
       </Text>
     )}
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
index 7a0fd47891..a0adda18be 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -46,7 +46,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           </FormErrorMessage>
         )}
         {caption && (
-          <Text className="text-foreground-4 mt-1 leading-snug" size={2}>
+          <Text className="mt-1 leading-snug text-foreground-4" size={2}>
             {caption}
           </Text>
         )}
diff --git a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
index 19b69fdf43..e7d203effc 100644
--- a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
+++ b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
@@ -1,15 +1,11 @@
 import { forwardRef } from 'react'
 import { FieldErrors, SubmitHandler, UseFormHandleSubmit, UseFormRegister } from 'react-hook-form'
 
-import { MessageTheme } from '@components/form-field-set'
-import * as FormFieldSet from '@components/form-field-set'
+import { ErrorMessageTheme, Fieldset, Input, Textarea } from '@/components'
 import { Text } from '@components/text'
 import { z } from 'zod'
 
-import { Input, Textarea } from '@harnessio/ui/components'
-
 // Define the form schema
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const formSchemaCompare = z.object({
   title: z.string().min(1, { message: 'Please provide a pull request title' }),
   description: z.string().optional()
@@ -35,26 +31,30 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
     }
     return (
       <form ref={ref} onSubmit={handleSubmit(onSubmit)}>
-        <FormFieldSet.Root>
-          <FormFieldSet.ControlGroup>
-            <FormFieldSet.Label htmlFor="title" required>
-              Title
-            </FormFieldSet.Label>
-            <Input id="title" {...register('title')} placeholder="Enter pull request title" autoFocus />
-            {errors.title && (
-              <FormFieldSet.Message theme={MessageTheme.ERROR}>{errors.title.message?.toString()}</FormFieldSet.Message>
-            )}
-          </FormFieldSet.ControlGroup>
-          <FormFieldSet.ControlGroup>
-            <FormFieldSet.Label htmlFor="description">Description</FormFieldSet.Label>
-            <Textarea id="description" {...register('description')} placeholder="Add Pull Request description here." />
-            {errors.description && (
-              <FormFieldSet.Message theme={MessageTheme.ERROR}>
-                {errors.description.message?.toString()}
-              </FormFieldSet.Message>
-            )}
-          </FormFieldSet.ControlGroup>
-        </FormFieldSet.Root>
+        <Fieldset>
+          <Input
+            id="title"
+            {...register('title')}
+            placeholder="Enter pull request title"
+            label="Title"
+            error={
+              errors.title && {
+                theme: ErrorMessageTheme.ERROR,
+                message: errors.title.message?.toString()
+              }
+            }
+            autoFocus
+          />
+          <Textarea
+            id="description"
+            {...register('description')}
+            placeholder="Add Pull Request description here."
+            label="Description"
+            error={
+              errors.description && { theme: ErrorMessageTheme.ERROR, message: errors.description.message?.toString() }
+            }
+          />
+        </Fieldset>
 
         {apiError && apiError !== "head branch doesn't contain any new commits." && (
           <Text size={1} className="text-destructive">
diff --git a/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx b/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx
index 83c896f5bd..c040098d0f 100644
--- a/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx
+++ b/packages/ui/src/views/repo/components/branch-selector/branch-selector-dropdown.tsx
@@ -80,7 +80,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
   return (
     <DropdownMenuContent className="w-[298px] p-0" align="start">
       <div className="px-3 pt-2">
-        <span className="leading-none text-14 font-medium">Switch branches/tags</span>
+        <span className="text-14 font-medium leading-none">Switch branches/tags</span>
 
         <SearchBox.Root
           className="mt-[18px] w-full"
@@ -137,7 +137,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
       <div className="mt-1">
         {filteredItems.length === 0 && (
           <div className="px-5 py-4 text-center">
-            <span className="leading-tight text-foreground-2 text-14">Nothing to show</span>
+            <span className="text-14 leading-tight text-foreground-2">Nothing to show</span>
           </div>
         )}
 
@@ -196,7 +196,7 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
         <DropdownMenuItem className="p-0" asChild>
           <div className="mt-1 border-t border-borders-1 px-3 py-2">
             <Link to={viewAllUrl}>
-              <span className="leading-none transition-colors duration-200 hover:text-foreground-1 text-14 font-medium">
+              <span className="text-14 font-medium leading-none transition-colors duration-200 hover:text-foreground-1">
                 {t('views:repos.viewAll', 'View all {{type}}', {
                   type: activeTab === BranchSelectorTab.BRANCHES ? t('views:repos.branches') : t('views:repos.tags')
                 })}
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
index ee07b6cee2..010a9cc053 100644
--- a/packages/ui/src/views/repo/repo-create/index.tsx
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -113,7 +113,7 @@ export function RepoCreatePage({
           Create a new repository
         </Text>
         <Spacer size={2.5} />
-        <Text className="text-foreground-2 max-w-[476px]" size={2} as="p">
+        <Text className="max-w-[476px] text-foreground-2" size={2} as="p">
           A repository contains all project files, including the revision history. Already have a project repository
           elsewhere?{' '}
           <StyledLink to="../import" relative="path">
@@ -214,7 +214,7 @@ export function RepoCreatePage({
           {/* ACCESS */}
           <Fieldset>
             <ControlGroup>
-              <Text className="text-foreground-2 leading-none" size={2}>
+              <Text className="leading-none text-foreground-2" size={2}>
                 Who has access
               </Text>
               <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
@@ -245,7 +245,7 @@ export function RepoCreatePage({
           {/* README */}
           <Fieldset>
             <ControlGroup>
-              <Text className="text-foreground-2 leading-none" size={2}>
+              <Text className="leading-none text-foreground-2" size={2}>
                 Initialize this repository with
               </Text>
               <RadioGroupItem
diff --git a/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx b/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx
index b206e767c5..5ad616b1ac 100644
--- a/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx
+++ b/packages/ui/src/views/repo/repo-summary/components/summary-panel.tsx
@@ -46,7 +46,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
   return (
     <div className="flex flex-col">
       <div className="flex items-center justify-between">
-        <span className="text-18 font-medium truncate">{title}</span>
+        <span className="truncate text-18 font-medium">{title}</span>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="sm_icon" aria-label="More options">
@@ -63,7 +63,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
       </div>
       <Spacer size={3} />
       {description?.length && !isEditingDescription && (
-        <span className="line-clamp-3 py-3 border-y border-borders-4 text-foreground-2 text-14">{description}</span>
+        <span className="line-clamp-3 border-y border-borders-4 py-3 text-14 text-foreground-2">{description}</span>
       )}
       {isEditingDescription && (
         <div>
@@ -95,7 +95,7 @@ const SummaryPanel: FC<SummaryPanelProps> = ({
         </div>
       )}
       <Spacer size={2} />
-      {timestamp && <span className="text-foreground-4 text-13">Created {timestamp}</span>}
+      {timestamp && <span className="text-13 text-foreground-4">Created {timestamp}</span>}
       <Spacer size={5} />
       <div className="flex flex-col gap-3">
         {details &&
diff --git a/packages/views/src/components/form-field-set.tsx b/packages/views/src/components/form-field-set.tsx
index ada4f9467d..9ac98b62db 100644
--- a/packages/views/src/components/form-field-set.tsx
+++ b/packages/views/src/components/form-field-set.tsx
@@ -82,6 +82,7 @@ function Root({ children, box, shaded, className }: RootProps) {
   )
 }
 
+/** @deprecated: Use FormLegend from @harnessio/ui/components instead */
 function Legend({ children, className }: CompProps) {
   return (
     <Text size={3} weight={'medium'} className={cn('mb-0', className)} as="p" role="heading">
@@ -90,6 +91,7 @@ function Legend({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated: Use FormLegend from @harnessio/ui/components instead */
 function SubLegend({ children, className }: CompProps) {
   return (
     <Text size={2} weight={'normal'} className={cn('text-primary/70 mb-0', className)} as="p" id="fieldset-description">
@@ -98,6 +100,7 @@ function SubLegend({ children, className }: CompProps) {
   )
 }
 
+/** @deprecated */
 function Item({ children, className }: CompProps) {
   return (
     <div className={cn('item-wrapper', className)} role="presentation">
@@ -173,6 +176,7 @@ function Option({ control, id, label, description, className }: OptionProps) {
   )
 }
 
+/** @deprecated: Use FormSeparator from @harnessio/ui/components instead */
 function Separator({ dashed, dotted, className }: SeparatorProps) {
   return (
     <div

From 2d50298272d1a45511f2d8f71f0af8220afe1728 Mon Sep 17 00:00:00 2001
From: Ilya Topilskii <iatopilskii@gmail.com>
Date: Wed, 4 Dec 2024 16:06:23 +0100
Subject: [PATCH 08/10] 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.
---
 packages/ui/src/components/button-group.tsx   |  10 +-
 packages/ui/src/components/checkbox.tsx       |  35 ------
 .../src/components/filters/filter-trigger.tsx |   2 +-
 .../filters-bar/filter-variants/calendar.tsx  |   2 +-
 .../filters-bar/filter-variants/checkbox.tsx  |   2 +-
 .../filters-bar/filter-variants/number.tsx    |   2 +-
 .../filters-bar/filter-variants/text.tsx      |   2 +-
 .../components/filters/filters-bar/sorts.tsx  |   2 +-
 .../ui/src/components/form-error-message.tsx  |  37 ------
 packages/ui/src/components/form-legend.tsx    |  24 ----
 packages/ui/src/components/form/caption.tsx   |  25 +++++
 packages/ui/src/components/form/checkbox.tsx  |  35 ++++++
 .../components/{ => form}/control-group.tsx   |   9 ++
 .../ui/src/components/{ => form}/fieldset.tsx |  10 ++
 packages/ui/src/components/form/index.ts      |  13 +++
 packages/ui/src/components/form/input.tsx     | 105 ++++++++++++++++++
 .../ui/src/components/{ => form}/label.tsx    |  25 ++++-
 packages/ui/src/components/form/legend.tsx    |  42 +++++++
 packages/ui/src/components/form/message.tsx   |  66 +++++++++++
 packages/ui/src/components/form/option.tsx    |  65 +++++++++++
 packages/ui/src/components/form/radio.tsx     |  47 ++++++++
 .../ui/src/components/{ => form}/select.tsx   |  60 +++++++---
 .../separator.tsx}                            |  15 +++
 .../ui/src/components/{ => form}/textarea.tsx |  40 ++++---
 packages/ui/src/components/index.ts           |  16 +--
 packages/ui/src/components/input.tsx          |  95 ----------------
 .../components/manage-navigation/index.tsx    |  16 +--
 packages/ui/src/components/radio-group.tsx    |  77 -------------
 .../pull-request-compare-button.tsx           |   4 +-
 .../components/pull-request-compare-form.tsx  |   8 +-
 .../ui/src/views/repo/repo-create/index.tsx   |  56 +++++-----
 .../ui/src/views/repo/repo-sidebar/index.tsx  |   8 +-
 .../views/repo/repo-summary/repo-summary.tsx  |   8 +-
 .../views/src/components/form-field-set.tsx   |   2 +-
 34 files changed, 587 insertions(+), 378 deletions(-)
 delete mode 100644 packages/ui/src/components/checkbox.tsx
 delete mode 100644 packages/ui/src/components/form-error-message.tsx
 delete mode 100644 packages/ui/src/components/form-legend.tsx
 create mode 100644 packages/ui/src/components/form/caption.tsx
 create mode 100644 packages/ui/src/components/form/checkbox.tsx
 rename packages/ui/src/components/{ => form}/control-group.tsx (54%)
 rename packages/ui/src/components/{ => form}/fieldset.tsx (50%)
 create mode 100644 packages/ui/src/components/form/index.ts
 create mode 100644 packages/ui/src/components/form/input.tsx
 rename packages/ui/src/components/{ => form}/label.tsx (56%)
 create mode 100644 packages/ui/src/components/form/legend.tsx
 create mode 100644 packages/ui/src/components/form/message.tsx
 create mode 100644 packages/ui/src/components/form/option.tsx
 create mode 100644 packages/ui/src/components/form/radio.tsx
 rename packages/ui/src/components/{ => form}/select.tsx (71%)
 rename packages/ui/src/components/{form-separator.tsx => form/separator.tsx} (52%)
 rename packages/ui/src/components/{ => form}/textarea.tsx (53%)
 delete mode 100644 packages/ui/src/components/input.tsx
 delete mode 100644 packages/ui/src/components/radio-group.tsx

diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
index b5d4b70ed5..dffe1edda9 100644
--- a/packages/ui/src/components/button-group.tsx
+++ b/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 }
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
deleted file mode 100644
index 513aef78e3..0000000000
--- a/packages/ui/src/components/checkbox.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
-
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { cn } from '@utils/cn'
-
-import { Icon } from './icon'
-import { Label } from './label'
-
-interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-  label?: string
-}
-
-const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-  ({ className, label, ...props }, ref) => (
-    <div className={cn('flex gap-x-2.5', className)}>
-      <CheckboxPrimitive.Root
-        ref={ref}
-        className="peer size-4 shrink-0 rounded-sm border border-icons-1 shadow hover:border-icons-3 disabled:cursor-not-allowed disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-        {...props}
-      >
-        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-          <Icon className="h-1.5 w-2" name="checkbox" width={8} height={6} />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label && (
-        <Label className="leading-tight" color="foreground-1" htmlFor={props.id}>
-          {label}
-        </Label>
-      )}
-    </div>
-  )
-)
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }
diff --git a/packages/ui/src/components/filters/filter-trigger.tsx b/packages/ui/src/components/filters/filter-trigger.tsx
index eb6d84b756..3a83d83600 100644
--- a/packages/ui/src/components/filters/filter-trigger.tsx
+++ b/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'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx
index 790b6b29b1..432027cc13 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/calendar.tsx
+++ b/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'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx
index 8b5050ba94..0b3cb9be89 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/checkbox.tsx
+++ b/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'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx
index 85a21bed29..9a7ba013c1 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/number.tsx
+++ b/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'
diff --git a/packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx b/packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx
index e877f2f642..0b7a0d14cc 100644
--- a/packages/ui/src/components/filters/filters-bar/filter-variants/text.tsx
+++ b/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'
diff --git a/packages/ui/src/components/filters/filters-bar/sorts.tsx b/packages/ui/src/components/filters/filters-bar/sorts.tsx
index ebc53f38ae..b7a3e2140a 100644
--- a/packages/ui/src/components/filters/filters-bar/sorts.tsx
+++ b/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'
diff --git a/packages/ui/src/components/form-error-message.tsx b/packages/ui/src/components/form-error-message.tsx
deleted file mode 100644
index a76f89c1ed..0000000000
--- a/packages/ui/src/components/form-error-message.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { HTMLAttributes } from 'react'
-
-import { cn } from '@utils/cn'
-
-import { Text } from './text'
-
-export enum ErrorMessageTheme {
-  SUCCESS = 'success',
-  WARNING = 'warning',
-  ERROR = 'error',
-  DEFAULT = 'default'
-}
-
-interface FormErrorMessageProps extends HTMLAttributes<HTMLDivElement> {
-  theme: ErrorMessageTheme
-}
-
-const themeClassMap: Record<ErrorMessageTheme, string> = {
-  [ErrorMessageTheme.SUCCESS]: 'text-success',
-  [ErrorMessageTheme.WARNING]: 'text-warning',
-  [ErrorMessageTheme.ERROR]: 'text-foreground-danger',
-  [ErrorMessageTheme.DEFAULT]: 'text-tertiary-background'
-}
-
-export function FormErrorMessage({ children, theme, className }: FormErrorMessageProps) {
-  const textClass = themeClassMap[theme]
-  const role = theme === ErrorMessageTheme.ERROR ? 'alert' : 'status'
-  const ariaLive = theme === ErrorMessageTheme.ERROR ? 'assertive' : 'polite'
-
-  return (
-    <div className={cn(textClass, className)} role={role} aria-live={ariaLive}>
-      <Text as="p" size={2} className="text-inherit">
-        {children}
-      </Text>
-    </div>
-  )
-}
diff --git a/packages/ui/src/components/form-legend.tsx b/packages/ui/src/components/form-legend.tsx
deleted file mode 100644
index 9deaccd370..0000000000
--- a/packages/ui/src/components/form-legend.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ReactNode } from 'react'
-
-import { Text } from '@components/text'
-
-interface FormLegendProps {
-  title: ReactNode
-  description?: ReactNode
-  className?: string
-}
-
-export function FormLegend({ title, description, className }: FormLegendProps) {
-  return (
-    <div className={className}>
-      <Text size={3} weight={'medium'} as="p" role="heading">
-        {title}
-      </Text>
-      {description && (
-        <Text size={2} as="p" id="fieldset-description">
-          {description}
-        </Text>
-      )}
-    </div>
-  )
-}
diff --git a/packages/ui/src/components/form/caption.tsx b/packages/ui/src/components/form/caption.tsx
new file mode 100644
index 0000000000..5e3ab9f72c
--- /dev/null
+++ b/packages/ui/src/components/form/caption.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>
+  )
+}
diff --git a/packages/ui/src/components/form/checkbox.tsx b/packages/ui/src/components/form/checkbox.tsx
new file mode 100644
index 0000000000..93fdf7f839
--- /dev/null
+++ b/packages/ui/src/components/form/checkbox.tsx
@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+import { Icon } from '@/components'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { cn } from '@utils/cn'
+
+interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {}
+
+/**
+ * Checkbox component that provides a customizable, accessible checkbox input.
+ * Built on top of Radix UI Checkbox primitive with additional styling.
+ *
+ * @param {CheckboxProps} props - The properties for the Checkbox component.
+ * @param {string} [props.className] - Optional additional class names for styling.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forward ref for the checkbox element.
+ * @returns {JSX.Element} The rendered Checkbox component.
+ */
+const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <div className={cn('flex gap-x-2.5', className)}>
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+          <Icon className="h-1.5 w-2" name="checkbox" width={8} height={6} />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    </div>
+  )
+)
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/packages/ui/src/components/control-group.tsx b/packages/ui/src/components/form/control-group.tsx
similarity index 54%
rename from packages/ui/src/components/control-group.tsx
rename to packages/ui/src/components/form/control-group.tsx
index f06ed08215..13eec5d94a 100644
--- a/packages/ui/src/components/control-group.tsx
+++ b/packages/ui/src/components/form/control-group.tsx
@@ -6,6 +6,15 @@ interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
   type?: 'button' | 'input'
 }
 
+/**
+ * A container component that groups form control elements together.
+ *
+ * @param props.type - Specifies the type of control group ('button' or 'input').
+ *                     Affects spacing and ARIA labels.
+ * @param props.children - The form control elements to be grouped (Label, Input/Button,
+ *                        ErrorMessage, Caption, etc.).
+ * @param props.className - Additional CSS classes to apply to the control group.
+ */
 export function ControlGroup({ children, type, className, ...props }: ControlGroupProps) {
   return (
     <div
diff --git a/packages/ui/src/components/fieldset.tsx b/packages/ui/src/components/form/fieldset.tsx
similarity index 50%
rename from packages/ui/src/components/fieldset.tsx
rename to packages/ui/src/components/form/fieldset.tsx
index 1eedab4c1e..df6a0134cd 100644
--- a/packages/ui/src/components/fieldset.tsx
+++ b/packages/ui/src/components/form/fieldset.tsx
@@ -7,6 +7,16 @@ interface FieldsetProps extends HTMLAttributes<HTMLFieldSetElement> {
   shaded?: boolean
 }
 
+/**
+ * A form fieldset component that groups related form elements.
+ * @component
+ * @param {FieldsetProps} props - The component props
+ * @param {ReactNode} props.children - The content to be rendered inside the fieldset
+ * @param {boolean} [props.box] - When true, adds border and padding to create a box around the fieldset
+ * @param {boolean} [props.shaded] - When true, adds a subtle background color to the fieldset
+ * @param {string} [props.className] - Additional CSS classes to apply to the fieldset
+ * @returns {JSX.Element} A styled fieldset element
+ */
 export function Fieldset({ children, box, shaded, className, ...props }: FieldsetProps) {
   return (
     <fieldset
diff --git a/packages/ui/src/components/form/index.ts b/packages/ui/src/components/form/index.ts
new file mode 100644
index 0000000000..76eb171368
--- /dev/null
+++ b/packages/ui/src/components/form/index.ts
@@ -0,0 +1,13 @@
+export * from './caption'
+export * from './checkbox'
+export * from './control-group'
+export * from './fieldset'
+export * from './input'
+export * from './label'
+export * from './legend'
+export * from './message'
+export * from './option'
+export * from './radio'
+export * from './select'
+export * from './textarea'
+export * from './separator'
diff --git a/packages/ui/src/components/form/input.tsx b/packages/ui/src/components/form/input.tsx
new file mode 100644
index 0000000000..c3010261f6
--- /dev/null
+++ b/packages/ui/src/components/form/input.tsx
@@ -0,0 +1,105 @@
+import { forwardRef, Fragment, InputHTMLAttributes, ReactNode } from 'react'
+
+import { Caption, ControlGroup, Label, Message, MessageTheme } from '@/components'
+import { cn } from '@utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export interface BaseInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {}
+
+const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled:cursor-not-allowed', {
+  variants: {
+    variant: {
+      default:
+        'placeholder:text-foreground-4 flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none',
+      extended: 'grow border-none focus-visible:outline-none'
+    },
+    size: {
+      sm: 'h-8',
+      md: 'h-9'
+    },
+    theme: {
+      default:
+        'border-borders-2 focus-visible:border-borders-3 disabled:border-borders-1 disabled:placeholder:text-foreground-9',
+      danger: 'border-borders-danger'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    theme: 'default',
+    size: 'sm'
+  }
+})
+
+const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
+  ({ className, type, variant, size, theme, ...props }, ref) => {
+    return <input className={cn(inputVariants({ variant, size, theme }), className)} type={type} ref={ref} {...props} />
+  }
+)
+
+BaseInput.displayName = 'BaseInput'
+
+interface InputError {
+  theme: MessageTheme
+  message?: string
+}
+
+interface InputProps extends BaseInputProps {
+  label?: string
+  caption?: ReactNode
+  error?: InputError
+  optional?: boolean
+}
+
+/**
+ * A form input component with support for labels, captions, and error messages.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {string} [props.label] - Optional label text displayed above the input
+ * @param {ReactNode} [props.caption] - Optional caption text displayed below the input
+ * @param {InputError} [props.error] - Error configuration object containing theme and message
+ * @param {string} [props.id] - Input element ID, used for label association
+ * @param {MessageTheme} [props.theme] - Visual theme of the input
+ * @param {boolean} [props.disabled] - Whether the input is disabled
+ * @param {boolean} [props.optional] - Indicates if the field is optional, displays "(Optional)" in the label
+ * @param {BaseInputProps} props.rest - All other props are passed to the underlying input element
+ *
+ * @example
+ * <Input
+ *   label="Email"
+ *   id="email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   caption="We'll never share your email"
+ *   error={{ theme: 'danger', message: 'Invalid email format' }}
+ * />
+ */
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, caption, error, id, theme, disabled, optional, ...props }, ref) => {
+    const InputWrapper = error || caption || label ? ControlGroup : Fragment
+
+    return (
+      <InputWrapper>
+        {label && (
+          <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
+            {label}
+          </Label>
+        )}
+        <BaseInput id={id} ref={ref} theme={error ? 'danger' : theme} disabled={disabled} {...props} />
+        {error && (
+          <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
+            {error.message}
+          </Message>
+        )}
+        {caption && <Caption>{caption}</Caption>}
+      </InputWrapper>
+    )
+  }
+)
+
+Input.displayName = 'Input'
+
+export { Input }
+export type { InputProps }
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/form/label.tsx
similarity index 56%
rename from packages/ui/src/components/label.tsx
rename to packages/ui/src/components/form/label.tsx
index 3468b43dfb..65996de354 100644
--- a/packages/ui/src/components/label.tsx
+++ b/packages/ui/src/components/form/label.tsx
@@ -12,15 +12,15 @@ const labelVariants = cva('peer-disabled:cursor-not-allowed peer-disabled:opacit
       default: 'text-sm font-normal leading-none'
     },
     color: {
-      'foreground-1': 'text-foreground-1',
-      'foreground-2': 'text-foreground-2',
-      'foreground-5': 'text-foreground-5',
-      'foreground-9': 'text-foreground-9'
+      primary: 'text-foreground-1',
+      secondary: 'text-foreground-2',
+      disabled: 'text-foreground-5',
+      'disabled-dark': 'text-foreground-9'
     }
   },
   defaultVariants: {
     variant: 'default',
-    color: 'foreground-1'
+    color: 'primary'
   }
 })
 
@@ -38,10 +38,23 @@ interface LabelProps extends VariantProps<typeof labelVariants>, PropsWithChildr
   className?: string
 }
 
+/**
+ * A Label component that wraps the Radix UI LabelPrimitive.Root component.
+ * It supports variant and color styling through class-variance-authority.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} [props.htmlFor] - The id of the element this label is associated with.
+ * @param {boolean} [props.optional] - If true, renders "(optional)" next to the label text.
+ * @param {string} [props.color] - The color variant of the label.
+ * @param {string} [props.variant] - The style variant of the label.
+ * @param {React.ReactNode} props.children - The content of the label.
+ * @param {string} [props.className] - Additional class names to apply to the label.
+ * @returns {JSX.Element} The rendered label component.
+ */
 const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => {
   return (
     <LabelRoot htmlFor={htmlFor} variant={variant} color={color} className={className}>
-      {children} {optional && <span className="align-top text-foreground-7">(optional)</span>}
+      {children} {optional && <span className="text-foreground-7 align-top">(optional)</span>}
     </LabelRoot>
   )
 }
diff --git a/packages/ui/src/components/form/legend.tsx b/packages/ui/src/components/form/legend.tsx
new file mode 100644
index 0000000000..0ab55c2157
--- /dev/null
+++ b/packages/ui/src/components/form/legend.tsx
@@ -0,0 +1,42 @@
+import { ReactNode } from 'react'
+
+import { Text } from '@components/text'
+
+interface LegendProps {
+  title: ReactNode
+  description?: ReactNode
+  className?: string
+}
+
+/**
+ * Legend component for form fieldsets
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Legend
+ *   title="Personal Information"
+ *   description="Please fill in your details below"
+ * />
+ * ```
+ *
+ * @param {object} props - Component props
+ * @param {ReactNode} props.title - The main title text or element
+ * @param {ReactNode} [props.description] - Optional description text or element
+ * @param {string} [props.className] - Optional CSS class name for custom styling
+ * @returns {JSX.Element} A legend component with title and optional description
+ */
+export function Legend({ title, description, className }: LegendProps) {
+  return (
+    <div className={className}>
+      <Text size={3} weight={'medium'} as="p" role="heading">
+        {title}
+      </Text>
+      {description && (
+        <Text size={2} as="p" id="fieldset-description">
+          {description}
+        </Text>
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/form/message.tsx b/packages/ui/src/components/form/message.tsx
new file mode 100644
index 0000000000..b54e4c33eb
--- /dev/null
+++ b/packages/ui/src/components/form/message.tsx
@@ -0,0 +1,66 @@
+import { HTMLAttributes } from 'react'
+
+import { Text } from '@/components'
+import { cn } from '@utils/cn'
+
+export enum MessageTheme {
+  SUCCESS = 'success',
+  WARNING = 'warning',
+  ERROR = 'error',
+  DEFAULT = 'default'
+}
+
+interface MessageProps extends HTMLAttributes<HTMLDivElement> {
+  theme: MessageTheme
+}
+
+const themeClassMap: Record<MessageTheme, string> = {
+  [MessageTheme.SUCCESS]: 'text-success',
+  [MessageTheme.WARNING]: 'text-warning',
+  [MessageTheme.ERROR]: 'text-foreground-danger',
+  [MessageTheme.DEFAULT]: 'text-tertiary-background'
+}
+
+/**
+ * Message component for displaying status or error messages with different themes.
+ *
+ * This component is typically used in forms to provide feedback to users, such as success, warning, or error messages.
+ *
+ * @component
+ * @param {MessageProps} props - The properties for the Message component.
+ * @param {MessageTheme} props.theme - The visual theme of the message (success, warning, error, or default).
+ *                                      This also affects accessibility attributes.
+ * @param {React.ReactNode} props.children - The content of the message to display.
+ * @param {string} [props.className] - Additional CSS classes to apply to the message container.
+ *
+ * @returns {JSX.Element} The rendered Message component.
+ *
+ * @example
+ * ```tsx
+ * <Message theme={MessageTheme.ERROR}>
+ *   This field is required
+ * </Message>
+ *
+ * <Message theme={MessageTheme.SUCCESS}>
+ *   Changes saved successfully
+ * </Message>
+ * ```
+ *
+ * @remarks
+ * - Uses appropriate ARIA roles ('alert' for errors, 'status' for other themes).
+ * - Sets aria-live appropriately ('assertive' for errors, 'polite' for other themes).
+ * - Applies theme-specific text colors through Tailwind classes.
+ */
+export function Message({ children, theme, className }: MessageProps) {
+  const textClass = themeClassMap[theme]
+  const role = theme === MessageTheme.ERROR ? 'alert' : 'status'
+  const ariaLive = theme === MessageTheme.ERROR ? 'assertive' : 'polite'
+
+  return (
+    <div className={cn(textClass, className)} role={role} aria-live={ariaLive}>
+      <Text as="p" size={2} className="text-inherit">
+        {children}
+      </Text>
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/form/option.tsx b/packages/ui/src/components/form/option.tsx
new file mode 100644
index 0000000000..f49a72ae9f
--- /dev/null
+++ b/packages/ui/src/components/form/option.tsx
@@ -0,0 +1,65 @@
+import { FC, ReactElement, ReactNode } from 'react'
+
+import { Checkbox, Label, RadioButton, Text } from '@/components'
+import { cn } from '@utils/cn'
+
+type ControlType = ReactElement<typeof RadioButton> | ReactElement<typeof Checkbox>
+
+/**
+ * Interface for Option component props
+ */
+interface OptionProps {
+  /** The radio button or checkbox control element */
+  control: ControlType
+  /** Unique identifier for the input */
+  id: string
+  /** Label text for the input */
+  label?: string
+  /** Optional description text or node below the label */
+  description?: string | ReactNode
+  /** Additional CSS classes */
+  className?: string
+  /** Indicates if the item is currently selected */
+  ariaSelected?: boolean
+}
+
+/**
+ * Individual item that contains a control (radio button or checkbox) with optional label and description
+ * @component
+ * @example
+ * <Option
+ *   control={<RadioButton value="option1" />}
+ *   id="option1"
+ *   label="Option 1"
+ *   description="Description for Option 1"
+ * />
+ */
+export const Option: FC<OptionProps> = ({ control, id, label, description, ariaSelected, className }) => {
+  return (
+    <div
+      className={cn('flex items-start', className)}
+      role="option"
+      aria-labelledby={`${id}-label`}
+      aria-selected={ariaSelected}
+    >
+      {control}
+      <div className="flex flex-col gap-0">
+        <Label htmlFor={id} className="cursor-pointer pl-4 font-medium leading-tight">
+          {label}
+        </Label>
+        {description && (
+          <Text
+            className="ml-4 mt-1.5 leading-snug tracking-tight"
+            as="p"
+            size={2}
+            color="tertiaryBackground"
+            id={`${id}-description`}
+            role="note"
+          >
+            {description}
+          </Text>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/form/radio.tsx b/packages/ui/src/components/form/radio.tsx
new file mode 100644
index 0000000000..bd7210b7bf
--- /dev/null
+++ b/packages/ui/src/components/form/radio.tsx
@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cn } from '@utils/cn'
+
+/**
+ * A container component for radio group items
+ * @component
+ * @example
+ * <RadioGroup onValueChange={(value) => console.log(value)}>
+ *   <RadioGroupItem control={<RadioButton />} id="option1" label="Option 1" />
+ * </RadioGroup>
+ */
+const RadioGroup = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn('grid gap-5', className)} {...props} ref={ref} />
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+/**
+ * A styled radio button input component
+ * @component
+ * @example
+ * <RadioButton value="option1" name="group" />
+ */
+const RadioButton = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4 flex items-center justify-center',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="size-2 rounded-full bg-primary" />
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioButton.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioButton }
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/form/select.tsx
similarity index 71%
rename from packages/ui/src/components/select.tsx
rename to packages/ui/src/components/form/select.tsx
index 238135d89a..128fc2100d 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/form/select.tsx
@@ -2,27 +2,40 @@
 
 import { Children, ComponentPropsWithoutRef, ElementRef, FC, forwardRef, PropsWithChildren, ReactNode } from 'react'
 
+import { Caption, Label, Message, MessageTheme } from '@/components'
 import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn } from '@utils/cn'
 
-import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
-import { Label } from './label'
-import { Text } from './text'
-
 interface SelectError {
-  theme: ErrorMessageTheme
+  theme: MessageTheme
   message?: string
 }
 
+/**
+ * Props for the Select component
+ * @interface SelectProps
+ * @extends {PropsWithChildren}
+ * @extends {SelectPrimitive.SelectProps}
+ */
 interface SelectProps extends PropsWithChildren, SelectPrimitive.SelectProps {
+  /** Label text displayed above the select */
   label?: string
+  /** Error state configuration */
   error?: SelectError
+  /** Optional caption text displayed below the select */
   caption?: ReactNode
+  /** Whether the select is disabled */
   disabled?: boolean
+  /** Placeholder text shown when no option is selected */
   placeholder: string
 }
 
+/**
+ * A customizable select component that supports labels, error states, and captions
+ * @param {SelectProps} props - The component props
+ * @returns {JSX.Element} The Select component
+ */
 const Select: FC<SelectProps> = ({
   name,
   label,
@@ -35,7 +48,7 @@ const Select: FC<SelectProps> = ({
 }) => (
   <SelectPrimitive.Root {...props}>
     {label && (
-      <Label className="mb-2.5" color={disabled ? 'foreground-9' : 'foreground-2'} htmlFor={name}>
+      <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} htmlFor={name}>
         {label}
       </Label>
     )}
@@ -44,15 +57,11 @@ const Select: FC<SelectProps> = ({
     </SelectTrigger>
     {children}
     {error && (
-      <FormErrorMessage className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
+      <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
         {error.message}
-      </FormErrorMessage>
-    )}
-    {caption && (
-      <Text className="mt-1 leading-snug text-foreground-4" size={2}>
-        {caption}
-      </Text>
+      </Message>
     )}
+    {caption && <Caption>{caption}</Caption>}
   </SelectPrimitive.Root>
 )
 Select.displayName = SelectPrimitive.Root.displayName
@@ -61,6 +70,11 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
+/**
+ * The trigger button for the select dropdown
+ * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string }} props - The component props
+ * @returns {JSX.Element} The SelectTrigger component
+ */
 const SelectTrigger = forwardRef<
   ElementRef<typeof SelectPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string }
@@ -81,6 +95,11 @@ const SelectTrigger = forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
+/**
+ * The content container for the select dropdown
+ * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Content>} props - The component props
+ * @returns {JSX.Element} The SelectContent component
+ */
 const SelectContent = forwardRef<
   ElementRef<typeof SelectPrimitive.Content>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
@@ -111,6 +130,11 @@ const SelectContent = forwardRef<
 ))
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
+/**
+ * A label component for grouping select items
+ * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Label>} props - The component props
+ * @returns {JSX.Element} The SelectLabel component
+ */
 const SelectLabel = forwardRef<
   ElementRef<typeof SelectPrimitive.Label>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
@@ -119,6 +143,11 @@ const SelectLabel = forwardRef<
 ))
 SelectLabel.displayName = SelectPrimitive.Label.displayName
 
+/**
+ * An individual selectable item within the dropdown
+ * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Item>} props - The component props
+ * @returns {JSX.Element} The SelectItem component
+ */
 const SelectItem = forwardRef<
   ElementRef<typeof SelectPrimitive.Item>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
@@ -141,6 +170,11 @@ const SelectItem = forwardRef<
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName
 
+/**
+ * A visual separator between select items
+ * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>} props - The component props
+ * @returns {JSX.Element} The SelectSeparator component
+ */
 const SelectSeparator = forwardRef<
   ElementRef<typeof SelectPrimitive.Separator>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
diff --git a/packages/ui/src/components/form-separator.tsx b/packages/ui/src/components/form/separator.tsx
similarity index 52%
rename from packages/ui/src/components/form-separator.tsx
rename to packages/ui/src/components/form/separator.tsx
index 626d09de10..7810ab2c7b 100644
--- a/packages/ui/src/components/form-separator.tsx
+++ b/packages/ui/src/components/form/separator.tsx
@@ -6,6 +6,21 @@ interface FormSeparatorProps {
   className?: string
 }
 
+/**
+ * A horizontal separator component for forms
+ * @component
+ * @param {FormSeparatorProps} props - The component props
+ * @returns {JSX.Element} A horizontal separator element
+ * @example
+ * // Basic usage
+ * <FormSeparator />
+ *
+ * // With dashed style
+ * <FormSeparator dashed />
+ *
+ * // With custom className
+ * <FormSeparator className="my-4" />
+ */
 export function FormSeparator({ dashed, dotted, className }: FormSeparatorProps) {
   return (
     <div
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/form/textarea.tsx
similarity index 53%
rename from packages/ui/src/components/textarea.tsx
rename to packages/ui/src/components/form/textarea.tsx
index a0adda18be..b884c97980 100644
--- a/packages/ui/src/components/textarea.tsx
+++ b/packages/ui/src/components/form/textarea.tsx
@@ -1,29 +1,45 @@
 import { forwardRef, ReactNode, TextareaHTMLAttributes } from 'react'
 
+import { Caption, ControlGroup, Label, Message, MessageTheme } from '@/components'
 import { cn } from '@utils/cn'
 
-import { ControlGroup } from './control-group'
-import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
-import { Label } from './label'
-import { Text } from './text'
-
+/**
+ * Interface for the error object used in the Textarea component.
+ */
 interface TextareaError {
-  theme: ErrorMessageTheme
+  /** Theme for the error message. */
+  theme: MessageTheme
+  /** Optional error message to display. */
   message?: string
 }
+
+/**
+ * Props for the Textarea component.
+ */
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Label for the textarea. */
   label?: string
+  /** Caption text displayed below the textarea. */
   caption?: ReactNode
+  /** Error object containing theme and optional message. */
   error?: TextareaError
+  /** Indicates if the textarea is optional. */
   optional?: boolean
 }
 
+/**
+ * A forward-ref Textarea component with support for labels, captions, and error messages.
+ *
+ * @param {TextareaProps} props - The props for the Textarea component.
+ * @param {React.Ref<HTMLTextAreaElement>} ref - The ref to be forwarded to the textarea element.
+ * @returns {JSX.Element} The rendered Textarea component.
+ */
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ id, disabled, label, caption, error, optional, className, ...props }, ref) => {
     return (
       <ControlGroup>
         {label && (
-          <Label className="mb-2.5" color={disabled ? 'foreground-9' : 'foreground-2'} optional={optional} htmlFor={id}>
+          <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
           </Label>
         )}
@@ -41,15 +57,11 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...props}
         />
         {error && (
-          <FormErrorMessage className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
+          <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
             {error.message}
-          </FormErrorMessage>
-        )}
-        {caption && (
-          <Text className="mt-1 leading-snug text-foreground-4" size={2}>
-            {caption}
-          </Text>
+          </Message>
         )}
+        {caption && <Caption>{caption}</Caption>}
       </ControlGroup>
     )
   }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 57d6788803..0ef30f8a03 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,7 +1,6 @@
 export * from './alert'
 export * from './icon'
 export * from './button'
-export * from './input'
 export * from './more-submenu'
 export * from './settings-menu'
 export * from './sheet'
@@ -17,34 +16,24 @@ export * from './alert-dialog'
 export * from './popover'
 export * from './avatar'
 export * from './navbar'
-export * from './label'
-export * from './select'
 export * from './theme-selector'
 export * from './theme-selector/types'
 export * from './no-data'
 export * from './tabs'
 export * from './command'
 export * from './search-files'
-export * from './radio-group'
-export * from './checkbox'
 export * from './toast'
 export * from './styled-link'
-export * from './fieldset'
-export * from './control-group'
-export * from './form-error-message'
 export * from './skeleton'
 export * from './table'
 export * from './commit-copy-actions'
-export * from './textarea'
 export * from './accordion'
 export * from './breadcrumb'
 export * from './skeleton-list'
 export * from './dialog'
 export * from './path-breadcrumbs'
-export * from './card'
-export * from './input-otp'
-export * from './control-group'
-export * from './form-error-message'
+export * from './form'
+export * from './button-group'
 
 export * as ShaBadge from './sha-badge'
 export * as ListActions from './list-actions'
@@ -52,7 +41,6 @@ export * as ListPagination from './list-pagination'
 export * as SearchBox from './search-box'
 export * as NavbarProjectChooser from './navbar-project-chooser'
 export * as StackedList from './stacked-list'
-export * as ButtonGroup from './button-group'
 export * as FileExplorer from './file-explorer'
 
 export type * from './navbar/types'
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
deleted file mode 100644
index 93e085f176..0000000000
--- a/packages/ui/src/components/input.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-
-import { cn } from '@utils/cn'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { ControlGroup } from './control-group'
-import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
-import { Label } from './label'
-import { Text } from './text'
-
-export interface BaseInputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
-    VariantProps<typeof inputVariants> {}
-
-const inputVariants = cva('bg-transparent px-2.5 py-1 text-foreground-1 disabled:cursor-not-allowed', {
-  variants: {
-    variant: {
-      default:
-        'flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none',
-      extended: 'grow border-none focus-visible:outline-none'
-    },
-    size: {
-      32: 'h-8',
-      36: 'h-9'
-    },
-    theme: {
-      default:
-        'border-borders-2 focus-visible:border-borders-3 disabled:border-borders-1 disabled:placeholder:text-foreground-9',
-      danger: 'border-borders-danger'
-    }
-  },
-  defaultVariants: {
-    variant: 'default',
-    theme: 'default',
-    size: 32
-  }
-})
-
-const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
-  ({ className, type, variant, size, theme, ...props }, ref) => {
-    return <input className={cn(inputVariants({ variant, size, theme }), className)} type={type} ref={ref} {...props} />
-  }
-)
-
-BaseInput.displayName = 'BaseInput'
-
-interface InputError {
-  theme: ErrorMessageTheme
-  message?: string
-}
-
-interface InputProps extends BaseInputProps {
-  label?: string
-  caption?: ReactNode
-  error?: InputError
-  optional?: boolean
-  wrapperClassName?: string
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, caption, error, id, theme, disabled, optional, className, wrapperClassName, ...props }, ref) => {
-    return (
-      <ControlGroup className={wrapperClassName}>
-        {label && (
-          <Label className="mb-2.5" color={disabled ? 'foreground-9' : 'foreground-2'} optional={optional} htmlFor={id}>
-            {label}
-          </Label>
-        )}
-        <BaseInput
-          className={className}
-          id={id}
-          ref={ref}
-          theme={error ? 'danger' : theme}
-          disabled={disabled}
-          {...props}
-        />
-        {error && (
-          <FormErrorMessage className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
-            {error.message}
-          </FormErrorMessage>
-        )}
-        {caption && (
-          <Text className="mt-1 leading-snug text-foreground-4" size={2}>
-            {caption}
-          </Text>
-        )}
-      </ControlGroup>
-    )
-  }
-)
-
-Input.displayName = 'Input'
-
-export { Input }
-export type { InputProps }
diff --git a/packages/ui/src/components/manage-navigation/index.tsx b/packages/ui/src/components/manage-navigation/index.tsx
index 4a131dc4a8..9dee8f5be2 100644
--- a/packages/ui/src/components/manage-navigation/index.tsx
+++ b/packages/ui/src/components/manage-navigation/index.tsx
@@ -127,11 +127,11 @@ export const ManageNavigation = ({
         </AlertDialogHeader>
         <ScrollArea className="-mx-5 -mb-5 mt-1">
           <div className="px-5">
-            <Text className="inline-block leading-none text-foreground-7" size={1}>
+            <Text className="text-foreground-7 inline-block leading-none" size={1}>
               Pinned
             </Text>
             {!currentPinnedItems.length ? (
-              <Text className="mt-3 block text-foreground-5" size={1}>
+              <Text className="text-foreground-5 mt-3 block" size={1}>
                 No pinned items
               </Text>
             ) : (
@@ -152,7 +152,7 @@ export const ManageNavigation = ({
                               <Text className="w-full text-left text-[inherit]">{item.title}</Text>
                             </Button>
                             <Button
-                              className="absolute right-1 top-0.5 z-20 text-icons-4 hover:text-icons-2"
+                              className="text-icons-4 hover:text-icons-2 absolute right-1 top-0.5 z-20"
                               size="sm_icon"
                               variant="custom"
                               onClick={() => removeFromPinnedItems(item)}
@@ -170,7 +170,7 @@ export const ManageNavigation = ({
             {currentFilteredRecentItems.length > 0 && (
               <>
                 <div className="mt-4 flex items-center justify-between">
-                  <Text className="inline-block leading-none text-foreground-7" size={1}>
+                  <Text className="text-foreground-7 inline-block leading-none" size={1}>
                     Recent
                   </Text>
                   <Button className="-mr-1.5" variant="link_accent" size="xs" onClick={handleClearRecent}>
@@ -182,10 +182,10 @@ export const ManageNavigation = ({
                     <li className="relative flex h-8 items-center" key={`recent-${item.id}-${index}`}>
                       <div className="flex w-full grow items-center gap-x-2.5">
                         <Icon className="text-icons-4" name="clock-icon" size={14} />
-                        <Text className="w-full text-left text-foreground-8">{item.title}</Text>
+                        <Text className="text-foreground-8 w-full text-left">{item.title}</Text>
                       </div>
                       <Button
-                        className="absolute -right-2 top-0.5 text-icons-4 hover:text-icons-2"
+                        className="text-icons-4 hover:text-icons-2 absolute -right-2 top-0.5"
                         size="sm_icon"
                         variant="custom"
                         onClick={() => addToPinnedItems(item)}
@@ -200,7 +200,7 @@ export const ManageNavigation = ({
           </div>
         </ScrollArea>
         <AlertDialogFooter>
-          <ButtonGroup.Root>
+          <ButtonGroup>
             {!submitted ? (
               <>
                 <Button variant="outline" onClick={handleCancel} disabled={isSubmitting}>
@@ -223,7 +223,7 @@ export const ManageNavigation = ({
                 <Icon name="tick" size={14} />
               </Button>
             )}
-          </ButtonGroup.Root>
+          </ButtonGroup>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
deleted file mode 100644
index e8ad3108c2..0000000000
--- a/packages/ui/src/components/radio-group.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { ComponentPropsWithoutRef, ElementRef, FC, forwardRef, ReactElement, ReactNode } from 'react'
-
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { cn } from '@utils/cn'
-
-import { Checkbox } from './checkbox'
-import { Label } from './label'
-import { Text } from './text'
-
-type ControlType = ReactElement<typeof RadioGroupItem> | ReactElement<typeof Checkbox>
-interface RadioGroupItemProps {
-  control: ControlType
-  id: string
-  label?: string
-  description?: string | ReactNode
-  className?: string
-  ariaSelected?: boolean
-}
-
-const RadioGroup = forwardRef<
-  ElementRef<typeof RadioGroupPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-5', className)} {...props} ref={ref} />
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem: FC<RadioGroupItemProps> = ({ control, id, label, description, ariaSelected, className }) => {
-  return (
-    <div
-      className={cn('flex items-start', className)}
-      role="option"
-      aria-labelledby={`${id}-label`}
-      aria-selected={ariaSelected}
-    >
-      {control}
-      <div className="flex flex-col gap-0">
-        <Label htmlFor={id} className="cursor-pointer pl-4 font-medium leading-tight">
-          {label}
-        </Label>
-        {description && (
-          <Text
-            className="ml-4 mt-1.5 leading-snug tracking-tight"
-            as="p"
-            size={2}
-            color="tertiaryBackground"
-            id={`${id}-description`}
-            role="note"
-          >
-            {description}
-          </Text>
-        )}
-      </div>
-    </div>
-  )
-}
-
-const RadioButton = forwardRef<
-  ElementRef<typeof RadioGroupPrimitive.Item>,
-  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'relative border-primary hover:border-icons-3 text-icons-5 aspect-square h-4 w-4 rounded-full border shadow focus-visible:rounded-full disabled:cursor-not-allowed disabled:border-icons-4 flex items-center justify-center',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="bg-primary size-2 rounded-full" />
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioButton.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioButton, RadioGroupItem }
diff --git a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx
index 2fce02b8e0..8e9e2298b1 100644
--- a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx
+++ b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-button.tsx
@@ -53,7 +53,7 @@ const PullRequestCompareButton: React.FC<PullRequestCompareButtonProps> = ({
     <>
       {!isSubmitted ? (
         <>
-          <ButtonGroup.Root>
+          <ButtonGroup>
             <Button
               theme={'primary'}
               variant="split"
@@ -81,7 +81,7 @@ const PullRequestCompareButton: React.FC<PullRequestCompareButtonProps> = ({
             >
               {!isLoading ? 'Create pull request' : 'Creating pull request...'}
             </Button>
-          </ButtonGroup.Root>
+          </ButtonGroup>
         </>
       ) : (
         <Button variant="ghost" type="button" size="sm" theme="success" className="pointer-events-none">
diff --git a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
index e7d203effc..52a6ed9cd0 100644
--- a/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
+++ b/packages/ui/src/views/pull-request/compare/components/pull-request-compare-form.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import { FieldErrors, SubmitHandler, UseFormHandleSubmit, UseFormRegister } from 'react-hook-form'
 
-import { ErrorMessageTheme, Fieldset, Input, Textarea } from '@/components'
+import { Fieldset, Input, MessageTheme, Textarea } from '@/components'
 import { Text } from '@components/text'
 import { z } from 'zod'
 
@@ -39,7 +39,7 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
             label="Title"
             error={
               errors.title && {
-                theme: ErrorMessageTheme.ERROR,
+                theme: MessageTheme.ERROR,
                 message: errors.title.message?.toString()
               }
             }
@@ -50,9 +50,7 @@ const PullRequestCompareForm = forwardRef<HTMLFormElement, PullRequestFormProps>
             {...register('description')}
             placeholder="Add Pull Request description here."
             label="Description"
-            error={
-              errors.description && { theme: ErrorMessageTheme.ERROR, message: errors.description.message?.toString() }
-            }
+            error={errors.description && { theme: MessageTheme.ERROR, message: errors.description.message?.toString() }}
           />
         </Fieldset>
 
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
index 010a9cc053..a2621fa800 100644
--- a/packages/ui/src/views/repo/repo-create/index.tsx
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -6,13 +6,13 @@ import {
   ButtonGroup,
   Checkbox,
   ControlGroup,
-  ErrorMessageTheme,
   Fieldset,
-  FormErrorMessage,
   Input,
+  Message,
+  MessageTheme,
+  Option,
   RadioButton,
   RadioGroup,
-  RadioGroupItem,
   Select,
   SelectContent,
   SelectItem,
@@ -113,7 +113,7 @@ export function RepoCreatePage({
           Create a new repository
         </Text>
         <Spacer size={2.5} />
-        <Text className="max-w-[476px] text-foreground-2" size={2} as="p">
+        <Text className="text-foreground-2 max-w-[476px]" size={2} as="p">
           A repository contains all project files, including the revision history. Already have a project repository
           elsewhere?{' '}
           <StyledLink to="../import" relative="path">
@@ -129,8 +129,8 @@ export function RepoCreatePage({
               label="Name"
               {...register('name')}
               placeholder="Enter repository name"
-              size={36}
-              error={errors.name && { theme: ErrorMessageTheme.ERROR, message: errors.name.message?.toString() }}
+              size="md"
+              error={errors.name && { theme: MessageTheme.ERROR, message: errors.name.message?.toString() }}
               autoFocus
             />
             <Spacer size={7} />
@@ -142,7 +142,7 @@ export function RepoCreatePage({
               label="Description"
               error={
                 errors.description && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.description.message?.toString()
                 }
               }
@@ -162,7 +162,7 @@ export function RepoCreatePage({
                 label="Add a .gitignore"
                 error={
                   errors.gitignore && {
-                    theme: ErrorMessageTheme.ERROR,
+                    theme: MessageTheme.ERROR,
                     message: errors.gitignore.message?.toString()
                   }
                 }
@@ -192,7 +192,7 @@ export function RepoCreatePage({
                 label="Choose a license"
                 error={
                   errors.license && {
-                    theme: ErrorMessageTheme.ERROR,
+                    theme: MessageTheme.ERROR,
                     message: errors.license.message?.toString()
                   }
                 }
@@ -214,18 +214,18 @@ export function RepoCreatePage({
           {/* ACCESS */}
           <Fieldset>
             <ControlGroup>
-              <Text className="leading-none text-foreground-2" size={2}>
+              <Text className="text-foreground-2 leading-none" size={2}>
                 Who has access
               </Text>
               <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
-                <RadioGroupItem
+                <Option
                   control={<RadioButton className="mt-px" value="1" id="access-public" />}
                   id="access-public"
                   label="Public"
                   ariaSelected={accessValue === '1'}
                   description="Anyone with access to the Gitness environment can clone this repo."
                 />
-                <RadioGroupItem
+                <Option
                   control={<RadioButton className="mt-px" value="2" id="access-private" />}
                   id="access-private"
                   label="Private"
@@ -234,9 +234,9 @@ export function RepoCreatePage({
                 />
               </RadioGroup>
               {errors.access && (
-                <FormErrorMessage className="mt-1" theme={ErrorMessageTheme.ERROR}>
+                <Message className="mt-1" theme={MessageTheme.ERROR}>
                   {errors.access.message?.toString()}
-                </FormErrorMessage>
+                </Message>
               )}
             </ControlGroup>
           </Fieldset>
@@ -245,10 +245,10 @@ export function RepoCreatePage({
           {/* README */}
           <Fieldset>
             <ControlGroup>
-              <Text className="leading-none text-foreground-2" size={2}>
+              <Text className="text-foreground-2 leading-none" size={2}>
                 Initialize this repository with
               </Text>
-              <RadioGroupItem
+              <Option
                 className="mt-6"
                 control={<Checkbox id="readme" checked={readmeValue} onCheckedChange={handleReadmeChange} />}
                 id="readme"
@@ -264,26 +264,22 @@ export function RepoCreatePage({
                 }
               />
 
-              {errors.readme && (
-                <FormErrorMessage theme={ErrorMessageTheme.ERROR}>{errors.readme.message?.toString()}</FormErrorMessage>
-              )}
+              {errors.readme && <Message theme={MessageTheme.ERROR}>{errors.readme.message?.toString()}</Message>}
             </ControlGroup>
           </Fieldset>
 
           {/* SUBMIT BUTTONS */}
           <Fieldset className="mt-[50px]">
             <ControlGroup>
-              <ButtonGroup.Root>
-                <>
-                  {/* TODO: Improve loading state to avoid flickering */}
-                  <Button type="submit" disabled={!isValid || isLoading}>
-                    {!isLoading ? 'Create repository' : 'Creating repository...'}
-                  </Button>
-                  <Button type="button" variant="outline" onClick={handleCancel}>
-                    Cancel
-                  </Button>
-                </>
-              </ButtonGroup.Root>
+              <ButtonGroup>
+                {/* TODO: Improve loading state to avoid flickering */}
+                <Button type="submit" disabled={!isValid || isLoading}>
+                  {!isLoading ? 'Create repository' : 'Creating repository...'}
+                </Button>
+                <Button type="button" variant="outline" onClick={handleCancel}>
+                  Cancel
+                </Button>
+              </ButtonGroup>
             </ControlGroup>
           </Fieldset>
         </form>
diff --git a/packages/ui/src/views/repo/repo-sidebar/index.tsx b/packages/ui/src/views/repo/repo-sidebar/index.tsx
index adede730ed..e36ab2c1e5 100644
--- a/packages/ui/src/views/repo/repo-sidebar/index.tsx
+++ b/packages/ui/src/views/repo/repo-sidebar/index.tsx
@@ -54,9 +54,9 @@ export const RepoSidebar = ({
                 useTranslationStore={useTranslationStore}
               />
             )}
-            <ButtonGroup.Root spacing="0" className="h-full overflow-hidden rounded shadow-as-border shadow-borders-2">
+            <ButtonGroup spacing="0" className="shadow-as-border shadow-borders-2 h-full overflow-hidden rounded">
               <Button
-                className="rounded-none border-l border-borders-2 p-0"
+                className="border-borders-2 rounded-none border-l p-0"
                 size="icon"
                 variant="ghost"
                 aria-label="Create new folder"
@@ -65,7 +65,7 @@ export const RepoSidebar = ({
                 <Icon size={16} name="add-folder" className="text-icons-3" />
               </Button>
               <Button
-                className="rounded-none border-l border-borders-2 p-0"
+                className="border-borders-2 rounded-none border-l p-0"
                 size="icon"
                 variant="ghost"
                 aria-label="Create new file"
@@ -73,7 +73,7 @@ export const RepoSidebar = ({
               >
                 <Icon size={16} name="add-file" className="text-icons-3" />
               </Button>
-            </ButtonGroup.Root>
+            </ButtonGroup>
           </div>
           <div className="pr-5">
             <SearchFiles
diff --git a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
index 2180dfa2d1..006893b093 100644
--- a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
+++ b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
@@ -130,7 +130,7 @@ export function RepoSummaryView({
           <SandboxLayout.Content>
             <ListActions.Root>
               <ListActions.Left>
-                <ButtonGroup.Root>
+                <ButtonGroup>
                   <BranchSelector
                     selectedBranch={selectedBranch}
                     branchList={branchList}
@@ -145,10 +145,10 @@ export function RepoSummaryView({
                     filesList={filesList}
                     useTranslationStore={useTranslationStore}
                   />
-                </ButtonGroup.Root>
+                </ButtonGroup>
               </ListActions.Left>
               <ListActions.Right>
-                <ButtonGroup.Root>
+                <ButtonGroup>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button className="gap-x-2" variant="outline">
@@ -175,7 +175,7 @@ export function RepoSummaryView({
                       handleCreateToken={handleCreateToken}
                     />
                    */}
-                </ButtonGroup.Root>
+                </ButtonGroup>
               </ListActions.Right>
             </ListActions.Root>
             <Spacer size={5} />
diff --git a/packages/views/src/components/form-field-set.tsx b/packages/views/src/components/form-field-set.tsx
index 9ac98b62db..38a7d1e41d 100644
--- a/packages/views/src/components/form-field-set.tsx
+++ b/packages/views/src/components/form-field-set.tsx
@@ -141,7 +141,7 @@ function Caption({ children, className }: CompProps) {
   )
 }
 
-/** @deprecated: Use ErrorMessage from @harnessio/ui/components instead */
+/** @deprecated: Use FormErrorMessage from @harnessio/ui/components instead */
 function Message({ children, theme, className }: MessageProps) {
   const textClass = themeClassMap[theme]
   const role = theme === MessageTheme.ERROR ? 'alert' : 'status'

From 1cc87a012a5e84473d21deffd746cf992847c115 Mon Sep 17 00:00:00 2001
From: Ilya Topilskii <iatopilskii@gmail.com>
Date: Wed, 4 Dec 2024 16:40:33 +0100
Subject: [PATCH 09/10] fix: fix linters and types

---
 packages/ui/src/components/badge.tsx          | 14 +++++------
 packages/ui/src/components/card.tsx           |  2 +-
 packages/ui/src/components/dialog.tsx         |  2 +-
 packages/ui/src/components/dropdown-menu.tsx  |  6 ++---
 .../filters/filters-bar/filters.tsx           | 14 +++++------
 .../components/filters/filters-bar/sorts.tsx  | 22 ++++++++---------
 packages/ui/src/components/form/checkbox.tsx  |  2 +-
 packages/ui/src/components/form/input.tsx     | 23 +++++++++++++-----
 packages/ui/src/components/form/label.tsx     |  2 +-
 packages/ui/src/components/index.ts           |  2 ++
 packages/ui/src/components/input-otp.tsx      |  2 +-
 .../components/manage-navigation/index.tsx    | 12 +++++-----
 .../src/views/auth/components/agreements.tsx  |  4 ++--
 .../auth/components/animated-harness-logo.tsx |  2 +-
 .../src/views/auth/forgot-password-page.tsx   |  8 +++----
 .../ui/src/views/auth/new-password-page.tsx   | 12 +++++-----
 packages/ui/src/views/auth/otp-page.tsx       |  4 ++--
 packages/ui/src/views/auth/signin-page.tsx    | 14 +++++------
 packages/ui/src/views/auth/signup-page.tsx    | 24 +++++++++----------
 .../ui/src/views/repo/repo-create/index.tsx   |  6 ++---
 .../ui/src/views/repo/repo-sidebar/index.tsx  |  6 ++---
 21 files changed, 98 insertions(+), 85 deletions(-)

diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx
index a4cc554ea6..7530f38bf7 100644
--- a/packages/ui/src/components/badge.tsx
+++ b/packages/ui/src/components/badge.tsx
@@ -17,24 +17,24 @@ enum BadgesHoverStates {
 }
 
 const badgeVariants = cva(
-  'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+  'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground'
       },
       size: {
         default: 'px-2.5 py-0.5 text-xs font-semibold',
         lg: 'px-3 py-1 text-xs font-normal',
-        sm: 'text-12 h-5 px-1 leading-none',
-        xs: 'text-11 px-1.5 py-0 font-light',
+        sm: 'h-5 px-1 text-12 leading-none',
+        xs: 'px-1.5 py-0 text-11 font-light',
         // TODO: Consider switching size variants to numeric values
         // Numeric size variants (like '18') provide clearer context about actual dimensions
         // compared to abstract sizes (xs, sm, lg).
-        '18': 'text-12 h-[18px] px-2'
+        '18': 'h-[18px] px-2 text-12'
       },
       borderRadius: {
         default: '',
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index 758e35e3bd..10db6b8cf8 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -3,7 +3,7 @@ import { forwardRef, HTMLAttributes } from 'react'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', {
+const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow', {
   variants: {
     variant: {
       default: '',
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index f309c51baf..3a05a899cd 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index ef079416fd..f650662b78 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -126,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="border-borders-9 group-data-[state=checked]:border-icons-2 absolute left-2 flex size-4 items-center justify-center rounded-sm border">
-      <DropdownMenuPrimitive.ItemIndicator className="bg-icons-2 flex size-full items-center justify-center">
-        <Icon className="text-icons-5 h-[7px]" name="checkbox" />
+    <span className="absolute left-2 flex size-4 items-center justify-center rounded-sm border border-borders-9 group-data-[state=checked]:border-icons-2">
+      <DropdownMenuPrimitive.ItemIndicator className="flex size-full items-center justify-center bg-icons-2">
+        <Icon className="h-[7px] text-icons-5" name="checkbox" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     <span className="text-14 text-foreground-8">{children}</span>
diff --git a/packages/ui/src/components/filters/filters-bar/filters.tsx b/packages/ui/src/components/filters/filters-bar/filters.tsx
index a1063bc0e2..7aed6d7b48 100644
--- a/packages/ui/src/components/filters/filters-bar/filters.tsx
+++ b/packages/ui/src/components/filters/filters-bar/filters.tsx
@@ -84,8 +84,8 @@ const Filters = ({
 
   return (
     <DropdownMenu key={filter.type} open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger className="bg-background-3 hover:bg-background-8 flex h-8 items-center gap-x-3 whitespace-nowrap rounded pl-2.5 pr-2 transition-colors duration-200">
-        <div className="text-13 flex items-center gap-x-1.5">
+      <DropdownMenuTrigger className="flex h-8 items-center gap-x-3 whitespace-nowrap rounded bg-background-3 pl-2.5 pr-2 transition-colors duration-200 hover:bg-background-8">
+        <div className="flex items-center gap-x-1.5 text-13">
           <span className="text-foreground-1">
             {filterOption.label}
             {!!filter.selectedValues.length && ': '}
@@ -107,7 +107,7 @@ const Filters = ({
               <span className="text-14 text-foreground-4">{filterOption.label}</span>
 
               <DropdownMenu>
-                <DropdownMenuTrigger className="bg-background-3 text-14 text-foreground-2 flex h-[18px] items-center gap-x-1 rounded pl-1.5 pr-1">
+                <DropdownMenuTrigger className="flex h-[18px] items-center gap-x-1 rounded bg-background-3 pl-1.5 pr-1 text-14 text-foreground-2">
                   {filterOption.conditions?.find(c => c.value === filter.condition)?.label}
                   <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
                 </DropdownMenuTrigger>
@@ -127,17 +127,17 @@ const Filters = ({
             <DropdownMenu>
               <DropdownMenuTrigger className="group flex h-[18px] items-center px-1">
                 <Icon
-                  className="text-icons-1 group-hover:text-foreground-1 transition-colors duration-200"
+                  className="text-icons-1 transition-colors duration-200 group-hover:text-foreground-1"
                   name="more-dots-fill"
                   size={12}
                 />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start">
                 <DropdownMenuItem
-                  className="text-foreground-4 hover:text-foreground-danger data-[highlighted]:text-foreground-danger duration-200 data-[highlighted]:bg-transparent data-[highlighted]:outline-none"
+                  className="text-foreground-4 duration-200 hover:text-foreground-danger data-[highlighted]:bg-transparent data-[highlighted]:text-foreground-danger data-[highlighted]:outline-none"
                   onSelect={() => handleRemoveFilter?.(filter.type)}
                 >
-                  <button className="text-14 flex items-center gap-x-1.5">
+                  <button className="flex items-center gap-x-1.5 text-14">
                     <Icon name="trash" size={12} />
                     Delete filter
                   </button>
@@ -153,7 +153,7 @@ const Filters = ({
 
           {filterOption.type === 'checkbox' && getFilteredOptions(filterOption, filter, searchQueries).length === 0 && (
             <div className="flex items-center justify-center p-4">
-              <span className="text-1 text-foreground-2 leading-none">No results</span>
+              <span className="text-1 leading-none text-foreground-2">No results</span>
             </div>
           )}
         </div>
diff --git a/packages/ui/src/components/filters/filters-bar/sorts.tsx b/packages/ui/src/components/filters/filters-bar/sorts.tsx
index b7a3e2140a..c9cda74c13 100644
--- a/packages/ui/src/components/filters/filters-bar/sorts.tsx
+++ b/packages/ui/src/components/filters/filters-bar/sorts.tsx
@@ -47,7 +47,7 @@ const SortableItem = ({
       <div className="flex items-center justify-between gap-x-2">
         <div className="flex items-center gap-x-2">
           <div
-            className="hover:bg-background-3 cursor-grab rounded p-1 active:cursor-grabbing"
+            className="cursor-grab rounded p-1 hover:bg-background-3 active:cursor-grabbing"
             {...attributes}
             {...listeners}
           >
@@ -55,7 +55,7 @@ const SortableItem = ({
           </div>
 
           <DropdownMenu>
-            <DropdownMenuTrigger className="border-borders-1 text-14 text-foreground-8 flex h-6 items-center gap-x-1.5 rounded border pl-2.5 pr-1.5">
+            <DropdownMenuTrigger className="flex h-6 items-center gap-x-1.5 rounded border border-borders-1 pl-2.5 pr-1.5 text-14 text-foreground-8">
               {sortOptions.find(opt => opt.value === sort.type)?.label}
               <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
             </DropdownMenuTrigger>
@@ -72,7 +72,7 @@ const SortableItem = ({
           </DropdownMenu>
 
           <DropdownMenu>
-            <DropdownMenuTrigger className="border-borders-1 text-14 text-foreground-8 flex h-6 items-center gap-x-1.5 rounded border pl-2.5 pr-1.5">
+            <DropdownMenuTrigger className="flex h-6 items-center gap-x-1.5 rounded border border-borders-1 pl-2.5 pr-1.5 text-14 text-foreground-8">
               {sortDirections.find(dir => dir.value === sort.direction)?.label}
               <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
             </DropdownMenuTrigger>
@@ -90,7 +90,7 @@ const SortableItem = ({
         </div>
 
         <button
-          className="text-foreground-4 hover:text-foreground-1 p-1 transition-colors duration-200 focus:bg-transparent"
+          className="p-1 text-foreground-4 transition-colors duration-200 hover:text-foreground-1 focus:bg-transparent"
           onClick={e => {
             e.preventDefault()
             onRemoveSort?.(index)
@@ -152,7 +152,7 @@ const Sorts = ({
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger className="bg-background-3 hover:bg-background-8 flex h-8 items-center gap-x-3 whitespace-nowrap rounded px-2.5 transition-colors duration-200">
+      <DropdownMenuTrigger className="flex h-8 items-center gap-x-3 whitespace-nowrap rounded bg-background-3 px-2.5 transition-colors duration-200 hover:bg-background-8">
         <div className="flex items-center gap-x-1">
           <Icon
             className={cn('text-icons-1', getSortTriggerLabel(activeSorts, sortOptions).isDescending && 'rotate-180')}
@@ -190,12 +190,12 @@ const Sorts = ({
         <div className="mt-3 flex flex-col gap-y-2.5">
           {sortOptions.some(option => !activeSorts.some(sort => sort.type === option.value)) && (
             <DropdownMenu>
-              <DropdownMenuTrigger className="text-14 text-foreground-4 hover:text-foreground-1 flex w-full items-center gap-x-1.5 transition-colors duration-200">
+              <DropdownMenuTrigger className="flex w-full items-center gap-x-1.5 text-14 text-foreground-4 transition-colors duration-200 hover:text-foreground-1">
                 <Icon name="plus" size={12} />
                 Add sort
               </DropdownMenuTrigger>
               <DropdownMenuContent className="min-w-[224px] p-0" align="start">
-                <div className="border-borders-4 relative flex items-center justify-between border-b px-3 py-2.5">
+                <div className="relative flex items-center justify-between border-b border-borders-4 px-3 py-2.5">
                   <DropdownMenuItem className="hover:bg-transparent focus:bg-transparent" asChild>
                     <Input
                       type="text"
@@ -210,7 +210,7 @@ const Sorts = ({
                   {searchQueries.menu['sort'] && (
                     <DropdownMenuItem className="absolute right-3 hover:bg-transparent focus:bg-transparent" asChild>
                       <button
-                        className="text-foreground-4 hover:text-foreground-1 flex transition-colors duration-200"
+                        className="flex text-foreground-4 transition-colors duration-200 hover:text-foreground-1"
                         onClick={e => {
                           e.preventDefault()
                           handleSearchChange('sort', '', 'menu')
@@ -239,7 +239,7 @@ const Sorts = ({
 
                   {filteredBySearchSortOptions.length === 0 && (
                     <div className="flex items-center justify-center p-4">
-                      <span className="text-1 text-foreground-2 leading-none">No results</span>
+                      <span className="text-1 leading-none text-foreground-2">No results</span>
                     </div>
                   )}
                 </div>
@@ -248,10 +248,10 @@ const Sorts = ({
           )}
 
           <DropdownMenuItem
-            className="text-foreground-4 focus:text-foreground-danger data-[highlighted]:text-foreground-danger p-0 transition-colors duration-200 focus:bg-transparent focus:outline-none data-[highlighted]:bg-transparent"
+            className="p-0 text-foreground-4 transition-colors duration-200 focus:bg-transparent focus:text-foreground-danger focus:outline-none data-[highlighted]:bg-transparent data-[highlighted]:text-foreground-danger"
             asChild
           >
-            <button className="text-14 flex items-center gap-x-1.5" onClick={handleResetSorts}>
+            <button className="flex items-center gap-x-1.5 text-14" onClick={handleResetSorts}>
               <Icon name="trash" size={12} />
               Delete sort
             </button>
diff --git a/packages/ui/src/components/form/checkbox.tsx b/packages/ui/src/components/form/checkbox.tsx
index 93fdf7f839..ff7b233b80 100644
--- a/packages/ui/src/components/form/checkbox.tsx
+++ b/packages/ui/src/components/form/checkbox.tsx
@@ -20,7 +20,7 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
+        className="peer size-4 shrink-0 rounded-sm border border-icons-1 shadow hover:border-icons-3 disabled:cursor-not-allowed disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
diff --git a/packages/ui/src/components/form/input.tsx b/packages/ui/src/components/form/input.tsx
index c3010261f6..a42e8853e3 100644
--- a/packages/ui/src/components/form/input.tsx
+++ b/packages/ui/src/components/form/input.tsx
@@ -8,11 +8,11 @@ export interface BaseInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
 
-const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled:cursor-not-allowed', {
+const inputVariants = cva('bg-transparent px-2.5 py-1 text-foreground-1 disabled:cursor-not-allowed', {
   variants: {
     variant: {
       default:
-        'placeholder:text-foreground-4 flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none',
+        'flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none',
       extended: 'grow border-none focus-visible:outline-none'
     },
     size: {
@@ -50,6 +50,8 @@ interface InputProps extends BaseInputProps {
   caption?: ReactNode
   error?: InputError
   optional?: boolean
+  className?: string
+  wrapperClassName?: string
 }
 
 /**
@@ -64,6 +66,8 @@ interface InputProps extends BaseInputProps {
  * @param {MessageTheme} [props.theme] - Visual theme of the input
  * @param {boolean} [props.disabled] - Whether the input is disabled
  * @param {boolean} [props.optional] - Indicates if the field is optional, displays "(Optional)" in the label
+ * @param {string} [props.className] - Optional additional class names for the input element
+ * @param {string} [props.wrapperClassName] - Optional additional class names for the wrapper element
  * @param {BaseInputProps} props.rest - All other props are passed to the underlying input element
  *
  * @example
@@ -77,17 +81,24 @@ interface InputProps extends BaseInputProps {
  * />
  */
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, caption, error, id, theme, disabled, optional, ...props }, ref) => {
-    const InputWrapper = error || caption || label ? ControlGroup : Fragment
+  ({ label, caption, error, id, theme, disabled, optional, className, wrapperClassName, ...props }, ref) => {
+    const InputWrapper = error || caption || label || wrapperClassName ? ControlGroup : Fragment
 
     return (
-      <InputWrapper>
+      <InputWrapper className={wrapperClassName}>
         {label && (
           <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
           </Label>
         )}
-        <BaseInput id={id} ref={ref} theme={error ? 'danger' : theme} disabled={disabled} {...props} />
+        <BaseInput
+          className={className}
+          id={id}
+          ref={ref}
+          theme={error ? 'danger' : theme}
+          disabled={disabled}
+          {...props}
+        />
         {error && (
           <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
             {error.message}
diff --git a/packages/ui/src/components/form/label.tsx b/packages/ui/src/components/form/label.tsx
index 65996de354..ad6ed97ae6 100644
--- a/packages/ui/src/components/form/label.tsx
+++ b/packages/ui/src/components/form/label.tsx
@@ -54,7 +54,7 @@ interface LabelProps extends VariantProps<typeof labelVariants>, PropsWithChildr
 const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => {
   return (
     <LabelRoot htmlFor={htmlFor} variant={variant} color={color} className={className}>
-      {children} {optional && <span className="text-foreground-7 align-top">(optional)</span>}
+      {children} {optional && <span className="align-top text-foreground-7">(optional)</span>}
     </LabelRoot>
   )
 }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 0ef30f8a03..6abddc994d 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -32,6 +32,8 @@ export * from './breadcrumb'
 export * from './skeleton-list'
 export * from './dialog'
 export * from './path-breadcrumbs'
+export * from './card'
+export * from './input-otp'
 export * from './form'
 export * from './button-group'
 
diff --git a/packages/ui/src/components/input-otp.tsx b/packages/ui/src/components/input-otp.tsx
index e82a54665e..049f1fd6ca 100644
--- a/packages/ui/src/components/input-otp.tsx
+++ b/packages/ui/src/components/input-otp.tsx
@@ -48,7 +48,7 @@ const InputOTPSlot = forwardRef<HTMLDivElement, InputOTPSlotProps>(({ index, cla
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-background-5 h-4 w-px duration-1000" />
+          <div className="animate-caret-blink h-4 w-px bg-background-5 duration-1000" />
         </div>
       )}
     </div>
diff --git a/packages/ui/src/components/manage-navigation/index.tsx b/packages/ui/src/components/manage-navigation/index.tsx
index 9dee8f5be2..9e1df9ed80 100644
--- a/packages/ui/src/components/manage-navigation/index.tsx
+++ b/packages/ui/src/components/manage-navigation/index.tsx
@@ -127,11 +127,11 @@ export const ManageNavigation = ({
         </AlertDialogHeader>
         <ScrollArea className="-mx-5 -mb-5 mt-1">
           <div className="px-5">
-            <Text className="text-foreground-7 inline-block leading-none" size={1}>
+            <Text className="inline-block leading-none text-foreground-7" size={1}>
               Pinned
             </Text>
             {!currentPinnedItems.length ? (
-              <Text className="text-foreground-5 mt-3 block" size={1}>
+              <Text className="mt-3 block text-foreground-5" size={1}>
                 No pinned items
               </Text>
             ) : (
@@ -152,7 +152,7 @@ export const ManageNavigation = ({
                               <Text className="w-full text-left text-[inherit]">{item.title}</Text>
                             </Button>
                             <Button
-                              className="text-icons-4 hover:text-icons-2 absolute right-1 top-0.5 z-20"
+                              className="absolute right-1 top-0.5 z-20 text-icons-4 hover:text-icons-2"
                               size="sm_icon"
                               variant="custom"
                               onClick={() => removeFromPinnedItems(item)}
@@ -170,7 +170,7 @@ export const ManageNavigation = ({
             {currentFilteredRecentItems.length > 0 && (
               <>
                 <div className="mt-4 flex items-center justify-between">
-                  <Text className="text-foreground-7 inline-block leading-none" size={1}>
+                  <Text className="inline-block leading-none text-foreground-7" size={1}>
                     Recent
                   </Text>
                   <Button className="-mr-1.5" variant="link_accent" size="xs" onClick={handleClearRecent}>
@@ -182,10 +182,10 @@ export const ManageNavigation = ({
                     <li className="relative flex h-8 items-center" key={`recent-${item.id}-${index}`}>
                       <div className="flex w-full grow items-center gap-x-2.5">
                         <Icon className="text-icons-4" name="clock-icon" size={14} />
-                        <Text className="text-foreground-8 w-full text-left">{item.title}</Text>
+                        <Text className="w-full text-left text-foreground-8">{item.title}</Text>
                       </div>
                       <Button
-                        className="text-icons-4 hover:text-icons-2 absolute -right-2 top-0.5"
+                        className="absolute -right-2 top-0.5 text-icons-4 hover:text-icons-2"
                         size="sm_icon"
                         variant="custom"
                         onClick={() => addToPinnedItems(item)}
diff --git a/packages/ui/src/views/auth/components/agreements.tsx b/packages/ui/src/views/auth/components/agreements.tsx
index 7f99dadd9e..43e7261f9a 100644
--- a/packages/ui/src/views/auth/components/agreements.tsx
+++ b/packages/ui/src/views/auth/components/agreements.tsx
@@ -7,14 +7,14 @@ export function Agreements() {
     <Text className="relative z-10 mt-auto leading-tight" size={0} color="foreground-5" align="center">
       By joining, you agree to{' '}
       <Link
-        className="text-foreground-1 hover:decoration-foreground-1 whitespace-nowrap underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
         to="/"
       >
         Terms of Service
       </Link>{' '}
       and&nbsp;
       <Link
-        className="text-foreground-1 hover:decoration-foreground-1 whitespace-nowrap underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
         to="/"
       >
         Privacy Policy
diff --git a/packages/ui/src/views/auth/components/animated-harness-logo.tsx b/packages/ui/src/views/auth/components/animated-harness-logo.tsx
index 092e6a90c6..7adc6416ce 100644
--- a/packages/ui/src/views/auth/components/animated-harness-logo.tsx
+++ b/packages/ui/src/views/auth/components/animated-harness-logo.tsx
@@ -36,7 +36,7 @@ export function AnimatedHarnessLogo({ theme }: AnimatedHarnessLogoProps) {
             shadowBackground
           )}
         />
-        <div className="bg-background-3 relative flex size-16 overflow-hidden rounded-full shadow-[0px_0px_20px_0px_rgba(0,0,0,0.6)]">
+        <div className="relative flex size-16 overflow-hidden rounded-full bg-background-3 shadow-[0px_0px_20px_0px_rgba(0,0,0,0.6)]">
           <span className="border-linear absolute inset-0 mix-blend-overlay [background:linear-gradient(180deg,#fff,transparent)_border-box]" />
           <span className="absolute -right-0.5 bottom-px size-7 translate-y-1/2 rounded-full bg-[#D9D9D9] opacity-5 blur-[10px]" />
           <span
diff --git a/packages/ui/src/views/auth/forgot-password-page.tsx b/packages/ui/src/views/auth/forgot-password-page.tsx
index 5dc3b14dd4..0b8b3dc589 100644
--- a/packages/ui/src/views/auth/forgot-password-page.tsx
+++ b/packages/ui/src/views/auth/forgot-password-page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Spacer, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Spacer, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -69,7 +69,7 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: ForgotPasswor
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -90,11 +90,11 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: ForgotPasswor
               type="email"
               placeholder="Your email"
               label="Email"
-              size={36}
+              size="md"
               {...register('email', { onChange: handleInputChange })}
               error={
                 errors.email && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.email.message?.toString()
                 }
               }
diff --git a/packages/ui/src/views/auth/new-password-page.tsx b/packages/ui/src/views/auth/new-password-page.tsx
index 59b76f89d8..b7a650e9fb 100644
--- a/packages/ui/src/views/auth/new-password-page.tsx
+++ b/packages/ui/src/views/auth/new-password-page.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -76,7 +76,7 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: NewPassw
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -96,12 +96,12 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: NewPassw
               id="password"
               type="password"
               label="New password"
-              size={36}
+              size="md"
               {...register('password', { onChange: handleInputChange })}
               placeholder="Password (6+ characters)"
               error={
                 errors.password && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.password.message?.toString()
                 }
               }
@@ -111,12 +111,12 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: NewPassw
               id="confirmPassword"
               type="password"
               label="Confirm password"
-              size={36}
+              size="md"
               {...register('confirmPassword', { onChange: handleInputChange })}
               placeholder="Confirm password"
               error={
                 errors.confirmPassword && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.confirmPassword.message?.toString()
                 }
               }
diff --git a/packages/ui/src/views/auth/otp-page.tsx b/packages/ui/src/views/auth/otp-page.tsx
index b80fa64797..2ae181233f 100644
--- a/packages/ui/src/views/auth/otp-page.tsx
+++ b/packages/ui/src/views/auth/otp-page.tsx
@@ -91,7 +91,7 @@ export function OTPPage({
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -126,7 +126,7 @@ export function OTPPage({
               />
               {(errors.otp || serverError) && (
                 <Text
-                  className="text-foreground-danger absolute top-full w-full translate-y-2 leading-none tracking-tight"
+                  className="absolute top-full w-full translate-y-2 leading-none tracking-tight text-foreground-danger"
                   align="center"
                   size={1}
                   as="p"
diff --git a/packages/ui/src/views/auth/signin-page.tsx b/packages/ui/src/views/auth/signin-page.tsx
index c17e9da5b3..80e1d9dce8 100644
--- a/packages/ui/src/views/auth/signin-page.tsx
+++ b/packages/ui/src/views/auth/signin-page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Spacer, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Spacer, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -72,7 +72,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -93,11 +93,11 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
               type="email"
               label="Email"
               placeholder="Your email"
-              size={36}
+              size="md"
               {...register('email', { onChange: handleInputChange })}
               error={
                 errors.email && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.email.message?.toString()
                 }
               }
@@ -110,10 +110,10 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
               {...register('password', { onChange: handleInputChange })}
               label="Password"
               placeholder="Password"
-              size={36}
+              size="md"
               error={
                 errors.password && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.password.message?.toString()
                 }
               }
@@ -134,7 +134,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps)
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Don’t have an account?{' '}
             <Link
-              className="text-foreground-accent hover:decoration-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
               to="/signup"
             >
               Sign up
diff --git a/packages/ui/src/views/auth/signup-page.tsx b/packages/ui/src/views/auth/signup-page.tsx
index 75a977ff45..ba836f8fac 100644
--- a/packages/ui/src/views/auth/signup-page.tsx
+++ b/packages/ui/src/views/auth/signup-page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, ErrorMessageTheme, Input, Spacer, Text } from '@/components'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, MessageTheme, Spacer, Text } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -69,7 +69,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
 
   return (
     <Floating1ColumnLayout
-      className="bg-background-7 flex-col pt-20 sm:pt-[186px]"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'green'}
       verticalCenter
     >
@@ -91,11 +91,11 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               {...register('userId', { onChange: handleInputChange })}
               placeholder="User ID"
               label="User ID"
-              size={36}
+              size="md"
               autoFocus
               error={
                 errors.userId && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.userId.message?.toString()
                 }
               }
@@ -107,10 +107,10 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               {...register('email', { onChange: handleInputChange })}
               placeholder="Your email"
               label="Email"
-              size={36}
+              size="md"
               error={
                 errors.email && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.email.message?.toString()
                 }
               }
@@ -121,11 +121,11 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               type="password"
               placeholder="Password (6+ characters)"
               label="Password"
-              size={36}
+              size="md"
               {...register('password', { onChange: handleInputChange })}
               error={
                 errors.password && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.password.message?.toString()
                 }
               }
@@ -136,18 +136,18 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
               type="password"
               placeholder="Confirm password"
               label="Confirm password"
-              size={36}
+              size="md"
               {...register('confirmPassword', { onChange: handleInputChange })}
               error={
                 errors.confirmPassword && {
-                  theme: ErrorMessageTheme.ERROR,
+                  theme: MessageTheme.ERROR,
                   message: errors.confirmPassword.message?.toString()
                 }
               }
             />
             {serverError && (
               <>
-                <Text className="text-foreground-danger mt-1 leading-none tracking-tight" size={0}>
+                <Text className="mt-1 leading-none tracking-tight text-foreground-danger" size={0}>
                   {serverError}
                 </Text>
               </>
@@ -168,7 +168,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Already have an account?{' '}
             <Link
-              className="text-foreground-accent hover:decoration-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200"
+              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
               to="/signin"
             >
               Sign in
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
index a2621fa800..977cf399bb 100644
--- a/packages/ui/src/views/repo/repo-create/index.tsx
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -113,7 +113,7 @@ export function RepoCreatePage({
           Create a new repository
         </Text>
         <Spacer size={2.5} />
-        <Text className="text-foreground-2 max-w-[476px]" size={2} as="p">
+        <Text className="max-w-[476px] text-foreground-2" size={2} as="p">
           A repository contains all project files, including the revision history. Already have a project repository
           elsewhere?{' '}
           <StyledLink to="../import" relative="path">
@@ -214,7 +214,7 @@ export function RepoCreatePage({
           {/* ACCESS */}
           <Fieldset>
             <ControlGroup>
-              <Text className="text-foreground-2 leading-none" size={2}>
+              <Text className="leading-none text-foreground-2" size={2}>
                 Who has access
               </Text>
               <RadioGroup className="mt-6" value={accessValue} onValueChange={handleAccessChange} id="access">
@@ -245,7 +245,7 @@ export function RepoCreatePage({
           {/* README */}
           <Fieldset>
             <ControlGroup>
-              <Text className="text-foreground-2 leading-none" size={2}>
+              <Text className="leading-none text-foreground-2" size={2}>
                 Initialize this repository with
               </Text>
               <Option
diff --git a/packages/ui/src/views/repo/repo-sidebar/index.tsx b/packages/ui/src/views/repo/repo-sidebar/index.tsx
index e36ab2c1e5..b4f53780cb 100644
--- a/packages/ui/src/views/repo/repo-sidebar/index.tsx
+++ b/packages/ui/src/views/repo/repo-sidebar/index.tsx
@@ -54,9 +54,9 @@ export const RepoSidebar = ({
                 useTranslationStore={useTranslationStore}
               />
             )}
-            <ButtonGroup spacing="0" className="shadow-as-border shadow-borders-2 h-full overflow-hidden rounded">
+            <ButtonGroup spacing="0" className="h-full overflow-hidden rounded shadow-as-border shadow-borders-2">
               <Button
-                className="border-borders-2 rounded-none border-l p-0"
+                className="rounded-none border-l border-borders-2 p-0"
                 size="icon"
                 variant="ghost"
                 aria-label="Create new folder"
@@ -65,7 +65,7 @@ export const RepoSidebar = ({
                 <Icon size={16} name="add-folder" className="text-icons-3" />
               </Button>
               <Button
-                className="border-borders-2 rounded-none border-l p-0"
+                className="rounded-none border-l border-borders-2 p-0"
                 size="icon"
                 variant="ghost"
                 aria-label="Create new file"

From ed675cd32e8bac5185ac941a42052c0e79e45333 Mon Sep 17 00:00:00 2001
From: Ilya Topilskii <iatopilskii@gmail.com>
Date: Wed, 4 Dec 2024 18:32:03 +0100
Subject: [PATCH 10/10] refactor: update documentation and examples for form
 components

---
 packages/ui/src/components/form/caption.tsx   |  7 ++---
 packages/ui/src/components/form/checkbox.tsx  |  9 ++----
 .../ui/src/components/form/control-group.tsx  | 10 +++----
 packages/ui/src/components/form/fieldset.tsx  | 11 +++-----
 packages/ui/src/components/form/input.tsx     | 18 ++----------
 packages/ui/src/components/form/label.tsx     | 13 ++-------
 packages/ui/src/components/form/legend.tsx    |  9 ------
 packages/ui/src/components/form/message.tsx   | 17 -----------
 packages/ui/src/components/form/option.tsx    | 10 -------
 packages/ui/src/components/form/select.tsx    | 28 ++++---------------
 packages/ui/src/components/form/separator.tsx |  3 --
 packages/ui/src/components/form/textarea.tsx  | 18 ++----------
 12 files changed, 25 insertions(+), 128 deletions(-)

diff --git a/packages/ui/src/components/form/caption.tsx b/packages/ui/src/components/form/caption.tsx
index 5e3ab9f72c..0318d5bbe6 100644
--- a/packages/ui/src/components/form/caption.tsx
+++ b/packages/ui/src/components/form/caption.tsx
@@ -10,11 +10,8 @@ interface CaptionProps extends PropsWithChildren {
 /**
  * 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.
+ * @example
+ * <Caption>This is a caption</Caption>
  */
 export function Caption({ children, className }: CaptionProps) {
   return (
diff --git a/packages/ui/src/components/form/checkbox.tsx b/packages/ui/src/components/form/checkbox.tsx
index ff7b233b80..09d62f6bbb 100644
--- a/packages/ui/src/components/form/checkbox.tsx
+++ b/packages/ui/src/components/form/checkbox.tsx
@@ -9,18 +9,15 @@ interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitiv
 /**
  * Checkbox component that provides a customizable, accessible checkbox input.
  * Built on top of Radix UI Checkbox primitive with additional styling.
- *
- * @param {CheckboxProps} props - The properties for the Checkbox component.
- * @param {string} [props.className] - Optional additional class names for styling.
- * @param {React.Ref<HTMLButtonElement>} ref - Forward ref for the checkbox element.
- * @returns {JSX.Element} The rendered Checkbox component.
+ * @example
+ * <Checkbox id="checkbox" checked={checkboxValue} onCheckedChange={checkboxChange} />
  */
 const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
   ({ className, ...props }, ref) => (
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="peer size-4 shrink-0 rounded-sm border border-icons-1 shadow hover:border-icons-3 disabled:cursor-not-allowed disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
diff --git a/packages/ui/src/components/form/control-group.tsx b/packages/ui/src/components/form/control-group.tsx
index 13eec5d94a..ad6f907f5f 100644
--- a/packages/ui/src/components/form/control-group.tsx
+++ b/packages/ui/src/components/form/control-group.tsx
@@ -8,12 +8,10 @@ interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 /**
  * A container component that groups form control elements together.
- *
- * @param props.type - Specifies the type of control group ('button' or 'input').
- *                     Affects spacing and ARIA labels.
- * @param props.children - The form control elements to be grouped (Label, Input/Button,
- *                        ErrorMessage, Caption, etc.).
- * @param props.className - Additional CSS classes to apply to the control group.
+ * @example
+ * <ControlGroup type="button">
+ *   <Button>Button</Button>
+ * </ControlGroup>
  */
 export function ControlGroup({ children, type, className, ...props }: ControlGroupProps) {
   return (
diff --git a/packages/ui/src/components/form/fieldset.tsx b/packages/ui/src/components/form/fieldset.tsx
index df6a0134cd..e3301afbc9 100644
--- a/packages/ui/src/components/form/fieldset.tsx
+++ b/packages/ui/src/components/form/fieldset.tsx
@@ -9,13 +9,10 @@ interface FieldsetProps extends HTMLAttributes<HTMLFieldSetElement> {
 
 /**
  * A form fieldset component that groups related form elements.
- * @component
- * @param {FieldsetProps} props - The component props
- * @param {ReactNode} props.children - The content to be rendered inside the fieldset
- * @param {boolean} [props.box] - When true, adds border and padding to create a box around the fieldset
- * @param {boolean} [props.shaded] - When true, adds a subtle background color to the fieldset
- * @param {string} [props.className] - Additional CSS classes to apply to the fieldset
- * @returns {JSX.Element} A styled fieldset element
+ * @example
+ * <Fieldset box shaded>
+ *   <div>Form elements</div>
+ * </Fieldset>
  */
 export function Fieldset({ children, box, shaded, className, ...props }: FieldsetProps) {
   return (
diff --git a/packages/ui/src/components/form/input.tsx b/packages/ui/src/components/form/input.tsx
index a42e8853e3..5ca0b0e1ec 100644
--- a/packages/ui/src/components/form/input.tsx
+++ b/packages/ui/src/components/form/input.tsx
@@ -8,11 +8,11 @@ export interface BaseInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
 
-const inputVariants = cva('bg-transparent px-2.5 py-1 text-foreground-1 disabled:cursor-not-allowed', {
+const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled:cursor-not-allowed', {
   variants: {
     variant: {
       default:
-        'flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none',
+        'placeholder:text-foreground-4 flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none',
       extended: 'grow border-none focus-visible:outline-none'
     },
     size: {
@@ -56,20 +56,6 @@ interface InputProps extends BaseInputProps {
 
 /**
  * A form input component with support for labels, captions, and error messages.
- *
- * @component
- * @param {Object} props - The component props
- * @param {string} [props.label] - Optional label text displayed above the input
- * @param {ReactNode} [props.caption] - Optional caption text displayed below the input
- * @param {InputError} [props.error] - Error configuration object containing theme and message
- * @param {string} [props.id] - Input element ID, used for label association
- * @param {MessageTheme} [props.theme] - Visual theme of the input
- * @param {boolean} [props.disabled] - Whether the input is disabled
- * @param {boolean} [props.optional] - Indicates if the field is optional, displays "(Optional)" in the label
- * @param {string} [props.className] - Optional additional class names for the input element
- * @param {string} [props.wrapperClassName] - Optional additional class names for the wrapper element
- * @param {BaseInputProps} props.rest - All other props are passed to the underlying input element
- *
  * @example
  * <Input
  *   label="Email"
diff --git a/packages/ui/src/components/form/label.tsx b/packages/ui/src/components/form/label.tsx
index ad6ed97ae6..4261be91f5 100644
--- a/packages/ui/src/components/form/label.tsx
+++ b/packages/ui/src/components/form/label.tsx
@@ -41,20 +41,13 @@ interface LabelProps extends VariantProps<typeof labelVariants>, PropsWithChildr
 /**
  * A Label component that wraps the Radix UI LabelPrimitive.Root component.
  * It supports variant and color styling through class-variance-authority.
- *
- * @param {Object} props - The properties object.
- * @param {string} [props.htmlFor] - The id of the element this label is associated with.
- * @param {boolean} [props.optional] - If true, renders "(optional)" next to the label text.
- * @param {string} [props.color] - The color variant of the label.
- * @param {string} [props.variant] - The style variant of the label.
- * @param {React.ReactNode} props.children - The content of the label.
- * @param {string} [props.className] - Additional class names to apply to the label.
- * @returns {JSX.Element} The rendered label component.
+ * @example
+ * <Label htmlFor="label" optional>Label</Label>
  */
 const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => {
   return (
     <LabelRoot htmlFor={htmlFor} variant={variant} color={color} className={className}>
-      {children} {optional && <span className="align-top text-foreground-7">(optional)</span>}
+      {children} {optional && <span className="text-foreground-7 align-top">(optional)</span>}
     </LabelRoot>
   )
 }
diff --git a/packages/ui/src/components/form/legend.tsx b/packages/ui/src/components/form/legend.tsx
index 0ab55c2157..0c183d117a 100644
--- a/packages/ui/src/components/form/legend.tsx
+++ b/packages/ui/src/components/form/legend.tsx
@@ -11,20 +11,11 @@ interface LegendProps {
 /**
  * Legend component for form fieldsets
  *
- * @component
  * @example
- * ```tsx
  * <Legend
  *   title="Personal Information"
  *   description="Please fill in your details below"
  * />
- * ```
- *
- * @param {object} props - Component props
- * @param {ReactNode} props.title - The main title text or element
- * @param {ReactNode} [props.description] - Optional description text or element
- * @param {string} [props.className] - Optional CSS class name for custom styling
- * @returns {JSX.Element} A legend component with title and optional description
  */
 export function Legend({ title, description, className }: LegendProps) {
   return (
diff --git a/packages/ui/src/components/form/message.tsx b/packages/ui/src/components/form/message.tsx
index b54e4c33eb..f57c83f9d1 100644
--- a/packages/ui/src/components/form/message.tsx
+++ b/packages/ui/src/components/form/message.tsx
@@ -23,20 +23,9 @@ const themeClassMap: Record<MessageTheme, string> = {
 
 /**
  * Message component for displaying status or error messages with different themes.
- *
  * This component is typically used in forms to provide feedback to users, such as success, warning, or error messages.
  *
- * @component
- * @param {MessageProps} props - The properties for the Message component.
- * @param {MessageTheme} props.theme - The visual theme of the message (success, warning, error, or default).
- *                                      This also affects accessibility attributes.
- * @param {React.ReactNode} props.children - The content of the message to display.
- * @param {string} [props.className] - Additional CSS classes to apply to the message container.
- *
- * @returns {JSX.Element} The rendered Message component.
- *
  * @example
- * ```tsx
  * <Message theme={MessageTheme.ERROR}>
  *   This field is required
  * </Message>
@@ -44,12 +33,6 @@ const themeClassMap: Record<MessageTheme, string> = {
  * <Message theme={MessageTheme.SUCCESS}>
  *   Changes saved successfully
  * </Message>
- * ```
- *
- * @remarks
- * - Uses appropriate ARIA roles ('alert' for errors, 'status' for other themes).
- * - Sets aria-live appropriately ('assertive' for errors, 'polite' for other themes).
- * - Applies theme-specific text colors through Tailwind classes.
  */
 export function Message({ children, theme, className }: MessageProps) {
   const textClass = themeClassMap[theme]
diff --git a/packages/ui/src/components/form/option.tsx b/packages/ui/src/components/form/option.tsx
index f49a72ae9f..b1db2a01cd 100644
--- a/packages/ui/src/components/form/option.tsx
+++ b/packages/ui/src/components/form/option.tsx
@@ -5,27 +5,17 @@ import { cn } from '@utils/cn'
 
 type ControlType = ReactElement<typeof RadioButton> | ReactElement<typeof Checkbox>
 
-/**
- * Interface for Option component props
- */
 interface OptionProps {
-  /** The radio button or checkbox control element */
   control: ControlType
-  /** Unique identifier for the input */
   id: string
-  /** Label text for the input */
   label?: string
-  /** Optional description text or node below the label */
   description?: string | ReactNode
-  /** Additional CSS classes */
   className?: string
-  /** Indicates if the item is currently selected */
   ariaSelected?: boolean
 }
 
 /**
  * Individual item that contains a control (radio button or checkbox) with optional label and description
- * @component
  * @example
  * <Option
  *   control={<RadioButton value="option1" />}
diff --git a/packages/ui/src/components/form/select.tsx b/packages/ui/src/components/form/select.tsx
index 128fc2100d..f5e1d79677 100644
--- a/packages/ui/src/components/form/select.tsx
+++ b/packages/ui/src/components/form/select.tsx
@@ -12,29 +12,21 @@ interface SelectError {
   message?: string
 }
 
-/**
- * Props for the Select component
- * @interface SelectProps
- * @extends {PropsWithChildren}
- * @extends {SelectPrimitive.SelectProps}
- */
 interface SelectProps extends PropsWithChildren, SelectPrimitive.SelectProps {
-  /** Label text displayed above the select */
   label?: string
-  /** Error state configuration */
   error?: SelectError
-  /** Optional caption text displayed below the select */
   caption?: ReactNode
-  /** Whether the select is disabled */
   disabled?: boolean
-  /** Placeholder text shown when no option is selected */
   placeholder: string
 }
 
 /**
  * A customizable select component that supports labels, error states, and captions
- * @param {SelectProps} props - The component props
- * @returns {JSX.Element} The Select component
+ * @example
+ * <Select name="select" label="Select an option" placeholder="Select an option">
+ *   <SelectItem value="option1">Option 1</SelectItem>
+ *   <SelectItem value="option2">Option 2</SelectItem>
+ * </Select>
  */
 const Select: FC<SelectProps> = ({
   name,
@@ -72,8 +64,6 @@ const SelectValue = SelectPrimitive.Value
 
 /**
  * The trigger button for the select dropdown
- * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { iconClassName?: string }} props - The component props
- * @returns {JSX.Element} The SelectTrigger component
  */
 const SelectTrigger = forwardRef<
   ElementRef<typeof SelectPrimitive.Trigger>,
@@ -97,8 +87,6 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
 /**
  * The content container for the select dropdown
- * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Content>} props - The component props
- * @returns {JSX.Element} The SelectContent component
  */
 const SelectContent = forwardRef<
   ElementRef<typeof SelectPrimitive.Content>,
@@ -132,8 +120,6 @@ SelectContent.displayName = SelectPrimitive.Content.displayName
 
 /**
  * A label component for grouping select items
- * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Label>} props - The component props
- * @returns {JSX.Element} The SelectLabel component
  */
 const SelectLabel = forwardRef<
   ElementRef<typeof SelectPrimitive.Label>,
@@ -145,8 +131,6 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName
 
 /**
  * An individual selectable item within the dropdown
- * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Item>} props - The component props
- * @returns {JSX.Element} The SelectItem component
  */
 const SelectItem = forwardRef<
   ElementRef<typeof SelectPrimitive.Item>,
@@ -172,8 +156,6 @@ SelectItem.displayName = SelectPrimitive.Item.displayName
 
 /**
  * A visual separator between select items
- * @param {ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>} props - The component props
- * @returns {JSX.Element} The SelectSeparator component
  */
 const SelectSeparator = forwardRef<
   ElementRef<typeof SelectPrimitive.Separator>,
diff --git a/packages/ui/src/components/form/separator.tsx b/packages/ui/src/components/form/separator.tsx
index 7810ab2c7b..f59ee67d56 100644
--- a/packages/ui/src/components/form/separator.tsx
+++ b/packages/ui/src/components/form/separator.tsx
@@ -8,9 +8,6 @@ interface FormSeparatorProps {
 
 /**
  * A horizontal separator component for forms
- * @component
- * @param {FormSeparatorProps} props - The component props
- * @returns {JSX.Element} A horizontal separator element
  * @example
  * // Basic usage
  * <FormSeparator />
diff --git a/packages/ui/src/components/form/textarea.tsx b/packages/ui/src/components/form/textarea.tsx
index b884c97980..c97fa6bca6 100644
--- a/packages/ui/src/components/form/textarea.tsx
+++ b/packages/ui/src/components/form/textarea.tsx
@@ -3,36 +3,22 @@ import { forwardRef, ReactNode, TextareaHTMLAttributes } from 'react'
 import { Caption, ControlGroup, Label, Message, MessageTheme } from '@/components'
 import { cn } from '@utils/cn'
 
-/**
- * Interface for the error object used in the Textarea component.
- */
 interface TextareaError {
-  /** Theme for the error message. */
   theme: MessageTheme
-  /** Optional error message to display. */
   message?: string
 }
 
-/**
- * Props for the Textarea component.
- */
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /** Label for the textarea. */
   label?: string
-  /** Caption text displayed below the textarea. */
   caption?: ReactNode
-  /** Error object containing theme and optional message. */
   error?: TextareaError
-  /** Indicates if the textarea is optional. */
   optional?: boolean
 }
 
 /**
  * A forward-ref Textarea component with support for labels, captions, and error messages.
- *
- * @param {TextareaProps} props - The props for the Textarea component.
- * @param {React.Ref<HTMLTextAreaElement>} ref - The ref to be forwarded to the textarea element.
- * @returns {JSX.Element} The rendered Textarea component.
+ * @example
+ * <Textarea name="textarea" label="Textarea" placeholder="Enter text here" />
  */
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ id, disabled, label, caption, error, optional, className, ...props }, ref) => {