Add <TransferList/>

src/components/Button/Button.module.scss

@@ -15,6 +15,10 @@
     line-height: 1rem;
     white-space: nowrap;
 
+    &-text {
+      padding: 0 0.125rem;
+    }
+
     &[data-align="start"] {
       justify-content: start;
     }

src/components/Button/Button.module.scss.d.ts

@@ -1 +1,2 @@
 export declare const button: string;
+export declare const buttonText: string;

src/components/Button/Button.tsx

@@ -80,7 +80,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
         </span>
       )}
       {text && (
-        <span>{text}</span>
+        <span className={styles.buttonText}>{text}</span>
       )}
     </>
   );

src/components/Checkbox/Checkbox.module.scss

@@ -29,14 +29,6 @@
       padding: 0;
 
       outline: 0;
-
-      &[data-checked],
-      &[data-indeterminate] {
-        --variant-border: var(--color-solid-primary-bg);
-
-        color: var(--color-solid-primary-text);
-        background-color: var(--color-solid-primary-bg);
-      }
     }
 
     &-indicator {

src/components/Checkbox/Checkbox.tsx

@@ -30,9 +30,9 @@ export const Checkbox = forwardRef<ElementRef<typeof BaseCheckbox.Root>, Checkbo
   <BaseCheckbox.Root
     ref={ref}
     {...props}
-    className={clsx(getStyleClassNames({
-      variant: 'ghost',
-      intent: 'secondary',
+    className={(state) => clsx(getStyleClassNames({
+      variant: state.checked || state.indeterminate ? 'solid' : 'ghost',
+      intent: state.checked || state.indeterminate ? 'primary' : 'secondary',
       border: true,
       corners: 'tight',
     }), styles.checkboxControl, className)}

src/components/InputText/InputText.module.scss

@@ -21,12 +21,18 @@
       width: 2.5rem;
       height: 2.5rem;
 
+      color: var(--color-text-muted);
+
       svg {
         width: 1rem;
         height: 1rem;
       }
     }
 
+    &:has(input:disabled) .icon-wrapper {
+      opacity: 0.6;
+    }
+
     input {
       width: 100%;
       height: 100%;

src/components/ScrollArea/ScrollArea.module.scss

@@ -12,6 +12,7 @@
     overflow: hidden;
     display: flex;
 
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
 

src/components/ScrollArea/ScrollArea.tsx

@@ -12,12 +12,16 @@ import { getStyleClassNames } from '../../utils/getStyleClassNames';
 import styles from './ScrollArea.module.scss';
 
 type ScrollAreaProps = ComponentPropsWithoutRef<'div'> & {
+  disabled?: boolean;
+  focusable?: boolean;
   offset?: Partial<Record<'top' | 'bottom' | 'left' | 'right', string | number | undefined>>;
 };
 
 export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(({
   className,
   children,
+  disabled = false,
+  focusable = true,
   onScroll,
   offset,
   style,
@@ -33,20 +37,29 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(({
       '--scroll-area-offset-left': getCssValue(offset?.left),
       '--scroll-area-offset-right': getCssValue(offset?.right),
     } as CSSProperties}
+    data-disabled={disabled || undefined}
     {...props}
   >
-    <BaseScrollArea.Viewport className={styles.scrollAreaViewport} onScroll={onScroll}>
+    <BaseScrollArea.Viewport
+      className={styles.scrollAreaViewport}
+      onScroll={onScroll}
+      {...(!focusable && { tabIndex: -1 })}
+    >
       <BaseScrollArea.Content>
         {children}
       </BaseScrollArea.Content>
     </BaseScrollArea.Viewport>
-    <BaseScrollArea.Scrollbar className={styles.scrollAreaScrollbar} orientation="vertical">
-      <BaseScrollArea.Thumb className={clsx(...getStyleClassNames({ variant: 'shaded', intent: 'secondary' }), styles.scrollAreaThumb)} />
-    </BaseScrollArea.Scrollbar>
-    <BaseScrollArea.Scrollbar className={styles.scrollAreaScrollbar} orientation="horizontal">
-      <BaseScrollArea.Thumb className={clsx(...getStyleClassNames({ variant: 'shaded', intent: 'secondary' }), styles.scrollAreaThumb)} />
-    </BaseScrollArea.Scrollbar>
-    <BaseScrollArea.Corner />
+    {!disabled && (
+      <>
+        <BaseScrollArea.Scrollbar className={styles.scrollAreaScrollbar} orientation="vertical">
+          <BaseScrollArea.Thumb className={clsx(...getStyleClassNames({ variant: 'shaded', intent: 'secondary' }), styles.scrollAreaThumb)} />
+        </BaseScrollArea.Scrollbar>
+        <BaseScrollArea.Scrollbar className={styles.scrollAreaScrollbar} orientation="horizontal">
+          <BaseScrollArea.Thumb className={clsx(...getStyleClassNames({ variant: 'shaded', intent: 'secondary' }), styles.scrollAreaThumb)} />
+        </BaseScrollArea.Scrollbar>
+        <BaseScrollArea.Corner />
+      </>
+    )}
   </BaseScrollArea.Root>
 ));
 

src/components/TransferList/TransferList.module.scss

@@ -0,0 +1,61 @@
+@use "../../style/layers";
+@use "../../style/flex";
+@use "../../style/text";
+
+@layer components {
+  .transfer-list {
+    display: grid;
+    gap: 0.5rem;
+
+    &[data-orientation="vertical"] {
+      grid-template-areas:
+        "available_label"
+        "available_list"
+        "selected_label"
+        "selected_list";
+      grid-template-columns: 100%;
+      grid-template-rows: auto 1fr auto 1fr;
+
+      &[data-batch] {
+        grid-template-areas:
+          "available_label"
+          "available_list"
+          "controls"
+          "selected_label"
+          "selected_list";
+        grid-template-rows: auto 1fr auto auto 1fr;
+      }
+    }
+
+    &[data-orientation="horizontal"] {
+      grid-template-areas:
+        "available_label selected_label"
+        "available_list selected_list";
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto auto;
+
+      &[data-batch] {
+        grid-template-areas:
+          "available_label . selected_label"
+          "available_list controls selected_list";
+        grid-template-columns: 1fr auto 1fr;
+      }
+    }
+
+    &-available-label {
+      grid-area: available_label;
+    }
+
+    &-available-list {
+      grid-area: available_list;
+    }
+
+    &-selected-label {
+      grid-area: selected_label;
+    }
+
+    &-selected-list {
+      grid-area: selected_list;
+    }
+  }
+}

src/components/TransferList/TransferList.module.scss.d.ts

@@ -0,0 +1,5 @@
+export declare const transferList: string;
+export declare const transferListAvailableLabel: string;
+export declare const transferListAvailableList: string;
+export declare const transferListSelectedLabel: string;
+export declare const transferListSelectedList: string;