feat: add scaffold for input component

common-react/@dbeaver/ui-kit/src/Input/Input.css

@@ -0,0 +1,68 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+.dbv-ui-input-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.dbv-ui-input {
+  background: var(--input-background);
+  border: 1px solid var(--input-border);
+  color: var(--input-foreground);
+  padding: var(--input-padding);
+  font-size: var(--input-font-size);
+  height: var(--control-height-medium);
+}
+
+.dbv-ui-input--small {
+  height: var(--control-height-small);
+}
+
+.dbv-ui-input--large {
+  height: var(--control-height-large);
+}
+
+.dbv-ui-input::placeholder {
+  color: var(--input-placeholder-foreground);
+}
+
+.dbv-ui-input-option--active {
+  background: var(--input-option-active-background);
+  border: 1px solid var(--input-option-active-border);
+  color: var(--input-option-active-foreground);
+}
+
+.dbv-ui-input-option:hover {
+  background: var(--input-option-hover-background);
+}
+
+.dbv-ui-input-validation--error {
+  background: var(--input-validation-error-background);
+  border: 1px solid var(--input-validation-errorBorder);
+}
+
+.dbv-ui-input-validation--warning {
+  background: var(--input-validation-warning-background);
+  border: 1px solid var(--input-validation-warning-border);
+}
+
+.dbv-ui-input-validation-message {
+  position: absolute;
+  z-index: 1;
+  bottom: calc(var(--font-size-base) * -1.25);
+  font-size: (--font-size-small);
+}
+
+.dbv-ui-input-validation-message--error {
+  color: var(--input-validation-error-foreground);
+}
+
+.dbv-ui-input-validation-message--warning {
+  color: var(--input-validation-warning-foreground);
+}

common-react/@dbeaver/ui-kit/src/Input/Input.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { Button } from '../Button/Button.js';
+import { Input } from './Input.js';
+
+export const InputExample = () => {
+  return (
+    <>
+      <div>
+        <Input placeholder="Username" />
+        <Input placeholder="Password" type="password" />
+        <Button>Log in</Button>
+      </div>
+
+      <div>
+        <Input error="This user already exists" placeholder="Username" />
+        <Input placeholder="Password" type="password" />
+        <Button>Register</Button>
+      </div>
+
+      <div>
+        <Input warning="This user already exists" placeholder="Username" />
+        <Input placeholder="Password" type="password" />
+        <Button>Register</Button>
+      </div>
+
+      <div>
+        <Input error="This user already exists" placeholder="Username" />
+        <Input placeholder="Password" type="password" />
+        <Button>Register</Button>
+      </div>
+    </>
+  );
+};
+
+export const InputWithWarning = () => {
+  return <Input warning="This is a warning" />;
+};

common-react/@dbeaver/ui-kit/src/Input/Input.tsx

@@ -0,0 +1,28 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { ComponentPropsWithRef } from 'react';
+import './Input.css';
+
+export interface UIKitInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+  size?: 'small' | 'medium' | 'large';
+  error?: string;
+  warning?: string;
+}
+
+export const Input: React.FC<UIKitInputProps> = function Input({ error, warning, size, ...props }) {
+  const classNameToApply =
+    `dbv-ui-input dbv-ui-input--${size ?? 'medium'} ${error ? 'dbv-ui-input-validation--error' : ''} ${warning ? 'dbv-ui-input-validation--warning' : ''}`.trim();
+  return (
+    <div className="dbv-ui-input-wrapper">
+      <input className={classNameToApply} {...props} />
+      {error && <div className="dbv-ui-input-validation-message dbv-ui-input-validation-message--error">{error}</div>}
+      {warning && <div className="dbv-ui-input-validation-message dbv-ui-input-validation-message--warning">{warning}</div>}
+    </div>
+  );
+};

common-react/@dbeaver/ui-kit/src/index.ts

@@ -9,3 +9,4 @@ import './index.css';
 
 export { Button, type UiKitButtonProps } from './Button/Button.js';
 export { Checkbox, type UIKitCheckboxProps } from './Checkbox/Checkbox.js';
+export { Input, type UIKitInputProps } from './Input/Input.js';