added dropdown menu component (shadcn)

packages/frontend/src/components/ui/dropdown-menu.tsx

@@ -12,13 +12,39 @@ function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMe
     return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+function DropdownMenuTrigger({
-    return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+    className,
+    size = "default",
+    ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}) {
+    return (
+        <DropdownMenuPrimitive.Trigger
+            data-slot="dropdown-menu-trigger"
+            data-size={size}
+            className={cn(
+                "cursor-pointer border data-[placeholder]:text-muted-foreground",
+                "[&_svg:not([class*='text-'])]:text-foreground",
+                "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+                "aria-invalid:border-destructive dark:hover:bg-muted/40",
+                "flex w-fit items-center justify-between gap-2 border",
+                "bg-transparent px-3 py-2 text-sm whitespace-nowrap",
+                "shadow-xs outline-none disabled:cursor-not-allowed",
+                "disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8",
+                "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex",
+                "*:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+                "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        />
+    );
 }
 
 function DropdownMenuContent({
     className,
-    sideOffset = 4,
+    sideOffset = 0,
     ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
     return (
@@ -27,7 +53,16 @@ function DropdownMenuContent({
                 data-slot="dropdown-menu-content"
                 sideOffset={sideOffset}
                 className={cn(
-                    "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+                    "bg-popover text-popover-foreground",
+                    "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95",
+                    "data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
+                    "data-[side=left]:slide-in-from-right-2",
+                    "data-[side=right]:slide-in-from-left-2",
+                    "data-[side=top]:slide-in-from-bottom-2",
+                    "z-50 max-h-(--radix-dropdown-menu-content-available-height)",
+                    "min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin)",
+                    "overflow-x-hidden overflow-y-auto border p-1 shadow-md",
+                    "data-[side=bottom]:translate-y-1",
                     className,
                 )}
                 {...props}
@@ -55,7 +90,18 @@ function DropdownMenuItem({
             data-inset={inset}
             data-variant={variant}
             className={cn(
-                "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                "focus:bg-accent/40 focus:text-accent-foreground",
+                "data-[variant=destructive]:text-destructive",
+                "data-[variant=destructive]:focus:bg-destructive/10",
+                "dark:data-[variant=destructive]:focus:bg-destructive/20",
+                "data-[variant=destructive]:focus:text-destructive",
+                "data-[variant=destructive]:*:[svg]:!text-destructive",
+                "[&_svg:not([class*='text-'])]:text-foreground relative",
+                "flex w-full cursor-pointer items-center gap-2 py-1.5 pr-8 pl-2",
+                "px-2 py-1.5 text-sm outline-hidden select-none",
+                "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                "data-[inset]:pl-8 [&_svg]:pointer-events-none",
+                "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 className,
             )}
             {...props}
@@ -73,7 +119,11 @@ function DropdownMenuCheckboxItem({
         <DropdownMenuPrimitive.CheckboxItem
             data-slot="dropdown-menu-checkbox-item"
             className={cn(
-                "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                "focus:bg-accent focus:text-accent-foreground relative",
+                "flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8",
+                "text-sm outline-hidden select-none data-[disabled]:pointer-events-none",
+                "data-[disabled]:opacity-50 [&_svg]:pointer-events-none",
+                "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 className,
             )}
             checked={checked}
@@ -102,7 +152,11 @@ function DropdownMenuRadioItem({
         <DropdownMenuPrimitive.RadioItem
             data-slot="dropdown-menu-radio-item"
             className={cn(
-                "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                "focus:bg-accent focus:text-accent-foreground relative",
+                "flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8",
+                "text-sm outline-hidden select-none data-[disabled]:pointer-events-none",
+                "data-[disabled]:opacity-50 [&_svg]:pointer-events-none",
+                "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 className,
             )}
             {...props}
@@ -174,7 +228,10 @@ function DropdownMenuSubTrigger({
             data-slot="dropdown-menu-sub-trigger"
             data-inset={inset}
             className={cn(
-                "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent",
+                "data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-foreground",
+                "flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-hidden select-none",
+                "data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 className,
             )}
             {...props}
@@ -193,7 +250,14 @@ function DropdownMenuSubContent({
         <DropdownMenuPrimitive.SubContent
             data-slot="dropdown-menu-sub-content"
             className={cn(
-                "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+                "bg-popover text-popover-foreground data-[state=open]:animate-in",
+                "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+                "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95",
+                "data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
+                "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+                "data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem]",
+                "origin-(--radix-dropdown-menu-content-transform-origin)",
+                "overflow-hidden border p-1 shadow-lg",
                 className,
             )}
             {...props}

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

@@ -68,6 +68,7 @@ function SelectContent({
         <SelectPrimitive.Portal>
             <SelectPrimitive.Content
                 data-slot="select-content"
+                data-align={align}
                 className={cn(
                     "bg-popover text-popover-foreground",
                     "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95",
@@ -79,6 +80,7 @@ function SelectContent({
                     "overflow-y-auto border shadow-md",
                     position === "popper" &&
                         "data-[side=bottom]:translate-y-1 data-[side=bottom]:-translate-x-1.5 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[side=top]:-translate-x-0.5",
+                    position === "popper" && align === "start" && "data-[side=bottom]:-translate-x-0",
                     className,
                 )}
                 position={position}