feat: add component select

Author: Ohh-889

packages/ui/package.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-popover": "1.1.14",
     "@radix-ui/react-radio-group": "1.3.7",
     "@radix-ui/react-scroll-area": "1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "1.1.7",
     "@radix-ui/react-slider": "1.3.5",
     "@radix-ui/react-slot": "1.2.3",

packages/ui/src/components/select/Select.tsx

@@ -0,0 +1,41 @@
+import { Root } from '@radix-ui/react-select';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import SelectContent from './SelectContent';
+import SelectOption from './SelectOption';
+import SelectTrigger from './SelectTrigger';
+import type { SelectProps } from './types';
+
+const Select = forwardRef<ComponentRef<typeof SelectContent>, SelectProps>((props, ref) => {
+  const { classNames, contentProps, indicatorIcon, items, size, triggerProps, ...rest } = props;
+
+  return (
+    <Root
+      data-slot="select-root"
+      {...rest}
+    >
+      <SelectTrigger {...triggerProps} />
+
+      <SelectContent
+        classNames={classNames}
+        ref={ref}
+        {...contentProps}
+      >
+        {items.map((item, index) => (
+          <SelectOption
+            classNames={classNames}
+            indicatorIcon={indicatorIcon}
+            item={item}
+            key={String(index)}
+            size={size}
+          />
+        ))}
+      </SelectContent>
+    </Root>
+  );
+});
+
+Select.displayName = 'Select';
+
+export default Select;

packages/ui/src/components/select/SelectContent.tsx

@@ -0,0 +1,75 @@
+import { Content, Portal, ScrollDownButton, ScrollUpButton, Viewport } from '@radix-ui/react-select';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { selectVariants } from './select-variants';
+import type { SelectContentProps } from './types';
+
+const SelectContent = forwardRef<ComponentRef<typeof Content>, SelectContentProps>((props, ref) => {
+  const {
+    children,
+    className,
+    classNames,
+    position = 'popper',
+    scrollDownButton,
+    scrollUpButton,
+    size,
+    ...rest
+  } = props;
+
+  const {
+    content,
+    scrollDownButton: scrollDownButtonCls,
+    scrollUpButton: scrollUpButtonCls,
+    viewport: viewportCls
+  } = selectVariants({ position, size });
+
+  const mergedCls = {
+    contentCls: cn(content(), className || classNames?.content),
+    scrollDownButtonCls: cn(scrollDownButtonCls(), classNames?.scrollDownButton),
+    scrollUpButtonCls: cn(scrollUpButtonCls(), classNames?.scrollUpButton),
+    viewportCls: cn(viewportCls(), classNames?.viewport)
+  };
+
+  return (
+    <Portal>
+      <Content
+        {...rest}
+        className={mergedCls.contentCls}
+        data-slot="select-content"
+        position={position}
+        ref={ref}
+      >
+        <ScrollUpButton
+          asChild
+          className={mergedCls.scrollUpButtonCls}
+          data-slot="scroll-up-button"
+        >
+          {scrollUpButton || <ChevronUp />}
+        </ScrollUpButton>
+
+        <Viewport
+          className={mergedCls.viewportCls}
+          data-slot="viewport"
+        >
+          {children}
+        </Viewport>
+
+        <ScrollDownButton
+          asChild
+          className={mergedCls.scrollDownButtonCls}
+          data-slot="scroll-down-button"
+        >
+          {scrollDownButton || <ChevronDown />}
+        </ScrollDownButton>
+      </Content>
+    </Portal>
+  );
+});
+
+SelectContent.displayName = Content.displayName;
+
+export default SelectContent;

packages/ui/src/components/select/SelectItem.tsx

@@ -0,0 +1,47 @@
+import { Item, ItemIndicator, ItemText } from '@radix-ui/react-select';
+import { Check } from 'lucide-react';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { selectVariants } from './select-variants';
+import type { SelectItemProps } from './types';
+
+const SelectItem = forwardRef<ComponentRef<typeof Item>, SelectItemProps>((props, ref) => {
+  const { children, className, classNames, indicatorIcon, leading, size, trailing, ...rest } = props;
+
+  const { item, itemIndicator } = selectVariants({ size });
+
+  const mergedCls = {
+    itemCls: cn(item(), className || classNames?.item),
+    itemIndicatorCls: cn(itemIndicator(), classNames?.itemIndicator)
+  };
+
+  return (
+    <Item
+      {...rest}
+      className={mergedCls.itemCls}
+      data-slot="select-item"
+      ref={ref}
+    >
+      {leading}
+
+      <ItemText data-slot="select-item-text">{children}</ItemText>
+
+      {trailing}
+
+      <ItemIndicator
+        asChild
+        className={mergedCls.itemIndicatorCls}
+        data-slot="select-item-indicator"
+      >
+        {indicatorIcon || <Check />}
+      </ItemIndicator>
+    </Item>
+  );
+});
+
+SelectItem.displayName = 'SelectItem';
+
+export default SelectItem;

packages/ui/src/components/select/SelectLabel.tsx

@@ -0,0 +1,24 @@
+import { Label } from '@radix-ui/react-select';
+
+import { cn } from '@/lib/utils';
+
+import { selectVariants } from './select-variants';
+import type { SelectLabelProps } from './types';
+
+const SelectLabel = (props: SelectLabelProps) => {
+  const { className, size, ...rest } = props;
+
+  const { groupLabel } = selectVariants({ size });
+
+  const mergedCls = cn(groupLabel(), className);
+
+  return (
+    <Label
+      className={mergedCls}
+      data-slot="select-group-label"
+      {...rest}
+    />
+  );
+};
+
+export default SelectLabel;

packages/ui/src/components/select/SelectOption.tsx

@@ -0,0 +1,62 @@
+import { Group } from '@radix-ui/react-select';
+
+import SelectItem from './SelectItem';
+import SelectLabel from './SelectLabel';
+import SelectSeparator from './SelectSeparator';
+import { isGroup, isSeparator } from './shared';
+import type { SelectOptionProps } from './types';
+
+const SelectOption = (props: SelectOptionProps) => {
+  const { classNames, indicatorIcon, item, size } = props;
+
+  if (isSeparator(item)) {
+    return (
+      <SelectSeparator
+        className={classNames?.separator}
+        size={size}
+        {...item}
+      />
+    );
+  }
+
+  if (isGroup(item)) {
+    const { children, label, ...rest } = item;
+    return (
+      <Group>
+        <SelectLabel
+          {...rest}
+          className={classNames?.groupLabel}
+        >
+          {label}
+        </SelectLabel>
+
+        {children.map(({ label: childLabel, ...childRest }) => (
+          <SelectItem
+            classNames={classNames}
+            indicatorIcon={indicatorIcon}
+            key={childRest.value}
+            size={size}
+            {...childRest}
+          >
+            {childLabel}
+          </SelectItem>
+        ))}
+      </Group>
+    );
+  }
+
+  const { label, ...rest } = item;
+
+  return (
+    <SelectItem
+      classNames={classNames}
+      indicatorIcon={indicatorIcon}
+      size={size}
+      {...rest}
+    >
+      {label}
+    </SelectItem>
+  );
+};
+
+export default SelectOption;

packages/ui/src/components/select/SelectSeparator.tsx

@@ -0,0 +1,24 @@
+import { Separator } from '@radix-ui/react-select';
+
+import { cn } from '@/lib/utils';
+
+import { selectVariants } from './select-variants';
+import type { SelectSeparatorProps } from './types';
+
+const SelectSeparator = (props: SelectSeparatorProps) => {
+  const { className, size, ...rest } = props;
+
+  const { separator } = selectVariants({ size });
+
+  const mergedCls = cn(separator(), className);
+
+  return (
+    <Separator
+      className={mergedCls}
+      data-slot="select-separator"
+      {...rest}
+    />
+  );
+};
+
+export default SelectSeparator;

packages/ui/src/components/select/SelectTrigger.tsx

@@ -0,0 +1,49 @@
+import { Icon, Trigger, Value } from '@radix-ui/react-select';
+import { ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+import { selectVariants } from './select-variants';
+import type { SelectTriggerProps } from './types';
+
+const SelectTrigger = (props: SelectTriggerProps) => {
+  const { children, className, classNames, leading, placeholder, size, trailing, triggerIcon, ...rest } = props;
+
+  const { trigger, triggerIcon: triggerIconCls } = selectVariants({ size });
+
+  const mergedCls = {
+    triggerCls: cn(trigger(), className || classNames?.trigger),
+    triggerIconCls: cn(triggerIconCls(), classNames?.triggerIcon)
+  };
+
+  return (
+    <Trigger
+      {...rest}
+      className={mergedCls.triggerCls}
+      data-slot="select-trigger"
+    >
+      {leading}
+
+      <Value
+        asChild={Boolean(children)}
+        className={cn(classNames?.selectedValue)}
+        data-slot="select-trigger-value"
+        placeholder={placeholder}
+      >
+        {children}
+      </Value>
+
+      {trailing}
+
+      <Icon
+        asChild
+        className={mergedCls.triggerIconCls}
+        data-slot="select-trigger-icon"
+      >
+        {triggerIcon || <ChevronsUpDown />}
+      </Icon>
+    </Trigger>
+  );
+};
+
+export default SelectTrigger;

packages/ui/src/components/select/index.ts

@@ -0,0 +1,9 @@
+export { default as Select } from './Select';
+export { default as SelectContent } from './SelectContent';
+export { default as SelectItem } from './SelectItem';
+export { default as SelectLabel } from './SelectLabel';
+export { default as SelectOption } from './SelectOption';
+export { default as SelectSeparator } from './SelectSeparator';
+export { default as SelectTrigger } from './SelectTrigger';
+
+export * from './types';