feat(Boxer): implement Boxer component with autocomplete and server-side support

src/Boxer/hooks/useBoxerOptions.tsx

@@ -0,0 +1,44 @@
+import { Combobox, Checkbox } from '@mantine/core';
+import { useMemo } from 'react';
+
+import type { BoxerItem } from '../Boxer.types';
+
+interface UseBoxerOptionsProps {
+  boxerData: Array<BoxerItem>;
+  value?: any | Array<any>;
+  multiSelect?: boolean;
+  onOptionSubmit: (index: number) => void;
+}
+
+const useBoxerOptions = (props: UseBoxerOptionsProps) => {
+  const { boxerData, value, multiSelect, onOptionSubmit } = props;
+
+  const options = useMemo(() => {
+    return boxerData.map((item, index) => {
+      const isSelected = multiSelect
+        ? Array.isArray(value) && value.includes(item.value)
+        : value === item.value;
+
+      return (
+        <Combobox.Option
+          key={`${item.value}-${index}`}
+          value={String(index)}
+          active={isSelected}
+        >
+          {multiSelect ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <Checkbox checked={isSelected} onChange={() => {}} tabIndex={-1} />
+              <span>{item.label}</span>
+            </div>
+          ) : (
+            item.label
+          )}
+        </Combobox.Option>
+      );
+    });
+  }, [boxerData, value, multiSelect]);
+
+  return { options };
+};
+
+export default useBoxerOptions;