Selectors with description

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

@@ -122,6 +122,37 @@ const SelectItem = React.forwardRef<
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
+interface SelectItemWithDescriptionProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+  title: string;
+  description?: string;
+}
+
+const SelectItemWithDescription = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  SelectItemWithDescriptionProps
+>(({className, title, description, ...props}, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-start rounded-sm py-2.5 pl-8 pr-3 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 top-3 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <div className="flex flex-col gap-0.5">
+      <SelectPrimitive.ItemText className="font-medium">{title}</SelectPrimitive.ItemText>
+      {description && <span className="text-xs text-neutral-500 leading-tight">{description}</span>}
+    </div>
+  </SelectPrimitive.Item>
+));
+SelectItemWithDescription.displayName = 'SelectItemWithDescription';
+
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
@@ -138,6 +169,7 @@ export {
   SelectContent,
   SelectLabel,
   SelectItem,
+  SelectItemWithDescription,
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,