CoreSelect

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect size="lg" width="240px">
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
	<CoreSelect.Item value="text-3">Option3</CoreSelect.Item>
	<CoreSelect.Item value="text-4">Option4</CoreSelect.Item>
	<CoreSelect.Item value="text-5">Option5</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect label="Label" size="lg" width="240px">
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
	<CoreSelect.Item value="text-3">Option3</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect, CoreTooltip } from '@featuring-corp/components';
import { IconInformationFilled } from '@featuring-corp/icons';
import { vars } from '@styles/theme.css';

<CoreSelect
	label="Label"
	size="lg"
	width="240px"
	labelElement={
		<CoreTooltip text="It's Label Element">
			<IconInformationFilled color={vars.global.colors.gray[50]} />
		</CoreTooltip>
	}
>
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect label="Label" size="lg" width="240px" readOnly required>
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect label="Label" size="lg" width="240px" disabled>
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect size="lg" width="240px" helperText="Helper Text">
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect size="lg" width="240px" status="error" validationText="Validation Text">
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';
import { IconSearchOutline } from '@featuring-corp/icons';

<CoreSelect size="lg" width="240px" leadingElement={<IconSearchOutline />}>
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect
	size="lg"
	width="340px"
	secondaryLabel={
		<span style={{ color: 'gray' }}>
			<span style={{ color: 'blue' }}>+ 21</span> / 21
		</span>
	}
>
	<CoreSelect.Item value="text-1">Option1</CoreSelect.Item>
	<CoreSelect.Item value="text-2">Option2</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect, CoreRadio } from '@featuring-corp/components';

<CoreSelect size="lg" width="240px">
	<CoreSelect.Item value="radio-1">
		<CoreRadio label="Option1" name="radio" />
	</CoreSelect.Item>
	<CoreSelect.Item value="radio-2">
		<CoreRadio label="Option2" name="radio" />
	</CoreSelect.Item>
	<CoreSelect.Item value="radio-3">
		<CoreRadio label="Option3" name="radio" />
	</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect, CoreCheckbox } from '@featuring-corp/components';

<CoreSelect size="lg" width="240px">
	<CoreSelect.Item value="check-1">
		<CoreCheckbox label="Option1" />
	</CoreSelect.Item>
	<CoreSelect.Item value="check-2">
		<CoreCheckbox label="Option2" />
	</CoreSelect.Item>
	<CoreSelect.Item value="check-3">
		<CoreCheckbox label="Option3" />
	</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect } from '@featuring-corp/components';
import { IconCalendarOutline } from '@featuring-corp/icons';

<CoreSelect size="lg" width="240px">
	<CoreSelect.Item value="icon-1">
		<IconCalendarOutline />
		Option1
	</CoreSelect.Item>
	<CoreSelect.Item value="icon-2">
		<IconCalendarOutline />
		Option2
	</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect, CoreAvatar } from '@featuring-corp/components';

<CoreSelect size="lg" width="240px">
	<CoreSelect.Item value="avatar-1">
		<CoreAvatar src="" size="sm" />
		Option1
	</CoreSelect.Item>
	<CoreSelect.Item value="avatar-2">
		<CoreAvatar src="" size="sm" />
		Option2
	</CoreSelect.Item>
</CoreSelect>;

import { CoreSelect, CoreCheckbox, CoreAvatar } from '@featuring-corp/components';

<CoreSelect size="lg" width="480px" optionHeight="320px" maxShowCount={4} maxTagWidth="80px">
	{Array.from({ length: 50 }).map((_, index) => (
		<CoreSelect.Item key={index} value={`avatar-${index + 1}`} displayValue={`Option${index + 1}`}>
			<CoreCheckbox
				label={
					<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
						<CoreAvatar size="sm" text={`${index + 1}-Option`} />
						{`Option${index + 1}`}
					</div>
				}
			/>
		</CoreSelect.Item>
	))}
</CoreSelect>;