App reorganization

app/components/controls/SelectOption/SelectOption.container.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { forwardRef, memo, useCallback } from "react";
+import { SelectOptionView } from "./SelectOption.view";
+import type { SelectOptionProps } from "./SelectOption.types";
+
+/**
+ * Figma: "Control / SelectOption" (TODO(figma)). Single option row rendered
+ * inside `SelectInput`'s dropdown menu.
+ */
+const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
+  (
+    {
+      children,
+      selected = false,
+      disabled = false,
+      className = "",
+      onClick,
+      size: sizeProp = "medium",
+      ...props
+    },
+    ref,
+  ) => {
+    const size = sizeProp;
+    const getTextSize = (): string => {
+      switch (size) {
+        case "small":
+          return "text-[10px] leading-[14px]";
+        case "medium":
+          return "text-[14px] leading-[20px]";
+        case "large":
+          return "text-[16px] leading-[24px]";
+        default:
+          return "text-[14px] leading-[20px]";
+      }
+    };
+
+    const itemClasses = `
+      flex items-center justify-between
+      px-[8px] py-[4px]
+      text-[var(--color-content-default-brand-primary)]
+      ${getTextSize()}
+      cursor-pointer
+      transition-colors duration-150
+      ${
+        selected
+          ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--measures-radius-small)]"
+          : ""
+      }
+      ${
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : "hover:!bg-[var(--color-surface-default-secondary)] hover:!rounded-[var(--measures-radius-small)]"
+      }
+      ${className}
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const handleClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!disabled && onClick) {
+          onClick(e);
+        }
+      },
+      [disabled, onClick],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!disabled && onClick) {
+            onClick(e);
+          }
+        }
+      },
+      [disabled, onClick],
+    );
+
+    return (
+      <SelectOptionView
+        ref={ref}
+        selected={selected}
+        disabled={disabled}
+        className={className}
+        itemClasses={itemClasses}
+        handleClick={handleClick}
+        handleKeyDown={handleKeyDown}
+        {...props}
+      >
+        {children}
+      </SelectOptionView>
+    );
+  },
+);
+
+SelectOptionContainer.displayName = "SelectOption";
+
+export default memo(SelectOptionContainer);

app/components/controls/SelectOption/SelectOption.types.ts

@@ -0,0 +1,25 @@
+export type SelectOptionSizeValue = "small" | "medium" | "large";
+
+export interface SelectOptionProps {
+  children?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (
+    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+  ) => void;
+  /**
+   * Select option size.
+   */
+  size?: SelectOptionSizeValue;
+}
+
+export interface SelectOptionViewProps {
+  children?: React.ReactNode;
+  selected: boolean;
+  disabled: boolean;
+  className: string;
+  itemClasses: string;
+  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
+  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
+}

app/components/controls/SelectOption/SelectOption.view.tsx

@@ -0,0 +1,55 @@
+import { forwardRef } from "react";
+import type { SelectOptionViewProps } from "./SelectOption.types";
+
+export const SelectOptionView = forwardRef<
+  HTMLDivElement,
+  SelectOptionViewProps
+>(
+  (
+    {
+      children,
+      selected,
+      disabled,
+      itemClasses,
+      handleClick,
+      handleKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={itemClasses}
+        role="option"
+        tabIndex={disabled ? -1 : 0}
+        aria-selected={selected}
+        aria-disabled={disabled}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <div className="flex items-center gap-[8px]">
+          {selected && (
+            <svg
+              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          )}
+          <span>{children}</span>
+        </div>
+      </div>
+    );
+  },
+);
+
+SelectOptionView.displayName = "SelectOptionView";

app/components/controls/SelectOption/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./SelectOption.container";
+export type { SelectOptionProps } from "./SelectOption.types";