feat: create simple checkbox

common-react/@dbeaver/ui-kit/src/Button/button.css

@@ -27,8 +27,6 @@
       cursor: not-allowed;
       opacity: 0.5;
     }
-
-   
   }
 
   .btn-primary {

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

@@ -0,0 +1,15 @@
+@import '../index.css';
+
+.checkbox {
+    accent-color: var(--checkbox-background);
+    width: 16px;
+    height: 16px;
+}
+
+.checkbox-label {
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(1);
+    margin-left: 0.5rem;
+    color: var(--checkbox-foreground);
+}

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

@@ -0,0 +1,16 @@
+import { Checkbox as AriaCheckbox, type CheckboxProps } from '@ariakit/react';
+import './Checkbox.css';
+
+interface UIKitCheckboxProps extends CheckboxProps {
+  children?: React.ReactNode;
+  Label?: React.ReactNode;
+}
+
+export function Checkbox({ className, children, ...props }: CheckboxProps) {
+  return (
+    <label className="checkbox-label">
+      <AriaCheckbox className={className ?? '' + ' ' + 'checkbox'} {...props} />
+      {children}
+    </label>
+  );
+}

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

@@ -0,0 +1,3 @@
+import { Checkbox } from './Checkbox.js';
+
+export const CheckboxStory = () => <Checkbox> Checkbox </Checkbox>;

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

@@ -7,4 +7,5 @@
  */
 import './index.css';
 
-export { Button } from './Button/Button.js';
+export { Button } from './Button/Button.js';
+export { Checkbox } from './Checkbox/Checkbox.js';